jandrews3 Posted September 17, 2009 Share Posted September 17, 2009 I need some buttons on a page: á, é, í, ó and ú which will insert that character as the next character in whichever field the user is typing. I am a Spanish teacher and my students take vocabulary quizzes which of course have accented letters. I want them to be able to click on a button to insert the letter rather than them having to use those god awful ALT CODES. Is this a Php problem? Quote Link to comment https://forums.phpfreaks.com/topic/174535-solved-insert-character-into-text-field/ Share on other sites More sharing options...
khr2003 Posted September 17, 2009 Share Posted September 17, 2009 This is a javascript issue and not a php. PHP is a server-side language (that means you have to submit something to the server, your page will be refreshed and you get the data), javascript is a client-side script meaning you can perform certain actions and see the results immediately. You may want to add an input button with its value the special characters you have and then apply a javascript code that will do what you requested. I might give you the code if you wanted. Quote Link to comment https://forums.phpfreaks.com/topic/174535-solved-insert-character-into-text-field/#findComment-919890 Share on other sites More sharing options...
Psycho Posted September 17, 2009 Share Posted September 17, 2009 No, this is a Javascript problem. The follwoing should help you. One bug I just noticed is that when insterting a character in FF the cursor position is lost after the insertion. I'm too lazy to fix it right now. <html> <head> <style> button { width:30px; } </style> <script type="text/javascript"> function insertAtCursor(fieldID, insertValue) { var fieldObj = document.getElementById(fieldID); if (document.selection) { //IE support fieldObj.focus(); document.selection.createRange().text = insertValue; } else if (fieldObj.selectionStart || fieldObj.selectionStart=='0') { //MOZILLA/NETSCAPE support fieldObj.value = fieldObj.value.substring(0, fieldObj.selectionStart) + insertValue + fieldObj.value.substring(fieldObj.selectionEnd, fieldObj.value.length); } else { fieldObj.value += insertValue; } } </script> </head> <body> <button onclick="insertAtCursor('txtarea1', 'à');">à</button> <button onclick="insertAtCursor('txtarea1', 'è');">è</button> <button onclick="insertAtCursor('txtarea1', 'í');">í</button> <button onclick="insertAtCursor('txtarea1', 'ó');">ó</button> <button onclick="insertAtCursor('txtarea1', 'ú');">ú</button> <br /><textarea id="txtarea1" rows="10" cols="40"></textarea> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/174535-solved-insert-character-into-text-field/#findComment-919896 Share on other sites More sharing options...
jandrews3 Posted September 17, 2009 Author Share Posted September 17, 2009 MAN, do I appreciate that! If you had the opportunity, I'd love to know how to re-focus the cursor. BUT THANKS! Quote Link to comment https://forums.phpfreaks.com/topic/174535-solved-insert-character-into-text-field/#findComment-920021 Share on other sites More sharing options...
Psycho Posted September 17, 2009 Share Posted September 17, 2009 All I did was find some code with a simple Google search then "improved" it a little. I've updated to maintain the cursor position in FF. I have only done limited testing in IE & FF, but it all appears to work correctly: <html> <head> <style> button { width:30px; } </style> <script type="text/javascript"> function insertAtCursor(fieldID, insertValue) { var fieldObj = document.getElementById(fieldID); if (document.selection) { //IE support fieldObj.focus(); document.selection.createRange().text = insertValue; } else if (fieldObj.selectionStart || fieldObj.selectionStart=='0') { //MOZILLA/NETSCAPE support endPos = fieldObj.selectionStart+1; fieldObj.value = fieldObj.value.substring(0, fieldObj.selectionStart) + insertValue + fieldObj.value.substring(fieldObj.selectionEnd, fieldObj.value.length); fieldObj.selectionStart = endPos fieldObj.selectionEnd = endPos fieldObj.focus(); } else { fieldObj.value += insertValue; } } </script> </head> <body> <button onclick="insertAtCursor('txtarea1', 'à');">à</button> <button onclick="insertAtCursor('txtarea1', 'è');">è</button> <button onclick="insertAtCursor('txtarea1', 'í');">í</button> <button onclick="insertAtCursor('txtarea1', 'ó');">ó</button> <button onclick="insertAtCursor('txtarea1', 'ú');">ú</button> <br /><textarea id="txtarea1" rows="10" cols="40"></textarea> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/174535-solved-insert-character-into-text-field/#findComment-920139 Share on other sites More sharing options...
jandrews3 Posted September 17, 2009 Author Share Posted September 17, 2009 I'd buy you a beer if I could. THANK YOU! Quote Link to comment https://forums.phpfreaks.com/topic/174535-solved-insert-character-into-text-field/#findComment-920366 Share on other sites More sharing options...
jandrews3 Posted September 17, 2009 Author Share Posted September 17, 2009 This worked WONDERFUL upon testing, however ... I need it to work with <input> fields and it wouldn't seem to. I tried the following code: <html> <head> <style> button { width:30px; } </style> <script type="text/javascript"> function insertAtCursor(fieldID, insertValue) { var fieldObj = document.getElementById(fieldID); if (document.selection) { //IE support fieldObj.focus(); document.selection.createRange().text = insertValue; } else if (fieldObj.selectionStart || fieldObj.selectionStart=='0') { //MOZILLA/NETSCAPE support endPos = fieldObj.selectionStart+1; fieldObj.value = fieldObj.value.substring(0, fieldObj.selectionStart) + insertValue + fieldObj.value.substring(fieldObj.selectionEnd, fieldObj.value.length); fieldObj.selectionStart = endPos fieldObj.selectionEnd = endPos fieldObj.focus(); } else { fieldObj.value += insertValue; } } </script> </head> <body> <button onclick="insertAtCursor('setme1', 'á');">á</button> <button onclick="insertAtCursor('setme1', 'é');">é</button> <button onclick="insertAtCursor('setme1', 'í');">í</button> <button onclick="insertAtCursor('setme1', 'ó');">ó</button> <button onclick="insertAtCursor('setme1', 'ú');">ú</button> <button onclick="insertAtCursor('setme1', 'ñ');">ñ</button> <button onclick="insertAtCursor('setme1', 'ü');">ü</button> <button onclick="insertAtCursor('setme1', '¿');">¿</button> <button onclick="insertAtCursor('setme1', '¡');">¡</button> <br> <button onclick="insertAtCursor('setme1', 'Á');">Á</button> <button onclick="insertAtCursor('setme1', 'É');">É</button> <button onclick="insertAtCursor('setme1', 'Í');">Í</button> <button onclick="insertAtCursor('setme1', 'Ó');">Ó</button> <button onclick="insertAtCursor('setme1', 'Ú');">Ú</button> <button onclick="insertAtCursor('setme1', 'Ñ');">Ñ</button> <button onclick="insertAtCursor('setme1', 'Ü');">Ü</button> <br /> <input type="text" name="setme1"> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/174535-solved-insert-character-into-text-field/#findComment-920370 Share on other sites More sharing options...
jandrews3 Posted September 17, 2009 Author Share Posted September 17, 2009 I'm an IDIOT! Nevermind. I set the "name" of the input field and not the "id". Thanks. Quote Link to comment https://forums.phpfreaks.com/topic/174535-solved-insert-character-into-text-field/#findComment-920381 Share on other sites More sharing options...
jandrews3 Posted September 19, 2009 Author Share Posted September 19, 2009 I am having another problem, however. When I put this code in a form, the button to put the special characters in the fields work, but then immediately cause the form to SUBMIT. <form action="vpractice2.php" method="post" autocomplete="off"> <? $count = 0; $max = 49; $num = 1; print "<input type=\"hidden\" name=\"title\" value=\"".$title."\">"; while ($count <= $max){ $fill_it = ${'you' . $count}; print $new_array[$count]." - ".$num.".<input type=\"text\" name=\"answer".$count."\" id=\"kelp".$count."\" value=\"".$fill_it."\">"; ?> <button onclick="insertAtCursor('kelp<?print $count;?>', 'á');">á</button> <button onclick="insertAtCursor('kelp<?print $count;?>', 'é');">é</button> <button onclick="insertAtCursor('kelp<?print $count;?>', 'í');">í</button> <button onclick="insertAtCursor('kelp<?print $count;?>', 'ó');">ó</button> <button onclick="insertAtCursor('kelp<?print $count;?>', 'ú');">ú</button> <button onclick="insertAtCursor('kelp<?print $count;?>', 'ñ');">ñ</button> <button onclick="insertAtCursor('kelp<?print $count;?>', '¿');">¿</button> <button onclick="insertAtCursor('kelp<?print $count;?>', '¡');">¡</button> <button onclick="insertAtCursor('kelp<?print $count;?>', 'ü');">ü</button> <? print "<input type=\"hidden\" name=\"new".$count."\" value=\"".$new_array[$count]."\">"; print "<input type=\"hidden\" name=\"ans".$count."\" value=\"".$new_answer[$count]."\">"; print "<input type=\"hidden\" name=\"verify\" value=\"".$verify."\">"; print "<br>"; $count++; $num++; } ?> <input type="submit" value="Submit Quiz!"> </form> Quote Link to comment https://forums.phpfreaks.com/topic/174535-solved-insert-character-into-text-field/#findComment-921413 Share on other sites More sharing options...
jandrews3 Posted September 19, 2009 Author Share Posted September 19, 2009 Sorry. I am guilty of posting to you all before I think. Problem solved. Quote Link to comment https://forums.phpfreaks.com/topic/174535-solved-insert-character-into-text-field/#findComment-921415 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.