<p>I want to insert some special characters at the caret inside textboxes using javascript on a button. How can this be done?</p>

<p>The script needs to find the active textbox and insert the character at the caret in that textbox. The script also needs to work in IE and Firefox.</p>

<p><strong>EDIT:</strong> It is also ok to insert the character "last" in the previously active textbox.</p>

[{'answer_id': 54162, 'author': 'Jason Cohen', 'author_id': 4926, 'author_profile': 'https://Stackoverflow.com/users/4926', 'pm_score': 0, 'selected': False, 'text': '<p>Note that if the user pushes a button, focus on the textbox will be lost and there will be no caret position!</p>\n'}, {'answer_id': 54164, 'author': 'delux247', 'author_id': 5569, 'author_profile': 'https://Stackoverflow.com/users/5569', 'pm_score': 0, 'selected': False, 'text': "<p>loop over all you input fields... \nfinding the one that has focus..\nthen once you have your text area...\nyou should be able to do something like...</p>\n\n<p>myTextArea.value = 'text to insert in the text area goes here';</p>\n"}, {'answer_id': 54167, 'author': 'Brian Warshaw', 'author_id': 1344, 'author_profile': 'https://Stackoverflow.com/users/1344', 'pm_score': 0, 'selected': False, 'text': "<p>I'm not sure if you can capture the caret position, but if you can, you can avoid Jason Cohen's concern by capturing the location (in relation to the string) using the text box's <code>onblur</code> event.</p>\n"}, {'answer_id': 54269, 'author': 'Brian Warshaw', 'author_id': 1344, 'author_profile': 'https://Stackoverflow.com/users/1344', 'pm_score': 1, 'selected': False, 'text': '<p>In light of your update:</p>\n\n<pre><code>var inputs = document.getElementsByTagName(\'input\');\nvar lastTextBox = null;\n\nfor(var i = 0; i &lt; inputs.length; i++)\n{\n  if(inputs[i].getAttribute(\'type\') == \'text\')\n  {\n    inputs[i].onfocus = function() {\n      lastTextBox = this;\n    }\n  }\n}\n\nvar button = document.getElementById("YOURBUTTONID");\nbutton.onclick = function() {\n  lastTextBox.value += \'PUTYOURTEXTHERE\';\n}\n</code></pre>\n'}, {'answer_id': 58369, 'author': 'bmb', 'author_id': 5298, 'author_profile': 'https://Stackoverflow.com/users/5298', 'pm_score': 2, 'selected': False, 'text': '<p>I think Jason Cohen is incorrect.  The caret position is preserved when focus is lost.</p>\n\n<p>[<strong>Edit</strong>: Added code for FireFox that I didn\'t have originally.]</p>\n\n<p>[<strong>Edit</strong>: Added code to determine the most recent active text box.]</p>\n\n<p>First, you can use each text box\'s onBlur event to set a variable to "this" so you always know the most recent active text box.</p>\n\n<p>Then, there\'s an IE way to get the cursor position that also works in Opera, and an easier way in Firefox.</p>\n\n<p>In IE the basic concept is to use the document.selection object and <em>put</em> some text <em>into</em> the selection. Then, using indexOf, you can get the position of the text you added.</p>\n\n<p>In FireFox, there\'s a method called selectionStart that will give you the cursor position.</p>\n\n<p>Once you have the cursor position, you overwrite the whole text.value with</p>\n\n<p>text before the cursor position + the text you want to insert + the text after the cursor position</p>\n\n<p>Here is an example with separate links for IE and FireFox.  You can use you favorite browser detection method to figure out which code to run.</p>\n\n<pre><code>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;\n\n&lt;script language="JavaScript"&gt;\n&lt;!--\n\nvar lasttext;\n\nfunction doinsert_ie() {\n    var oldtext = lasttext.value;\n    var marker = "##MARKER##";\n    lasttext.focus();\n    var sel = document.selection.createRange();\n    sel.text = marker;\n    var tmptext = lasttext.value;\n    var curpos = tmptext.indexOf(marker);\n    pretext = oldtext.substring(0,curpos);\n    posttest = oldtext.substring(curpos,oldtext.length);\n    lasttext.value = pretext + "|" + posttest;\n}\n\nfunction doinsert_ff() {\n    var oldtext = lasttext.value;\n    var curpos = lasttext.selectionStart;\n    pretext = oldtext.substring(0,curpos);\n    posttest = oldtext.substring(curpos,oldtext.length);\n    lasttext.value = pretext + "|" + posttest;\n}\n\n--&gt;\n&lt;/script&gt;\n\n\n&lt;form name="testform"&gt;\n&lt;input type="text" name="testtext1" onBlur="lasttext=this;"&gt;\n&lt;input type="text" name="testtext2" onBlur="lasttext=this;"&gt;\n&lt;input type="text" name="testtext3" onBlur="lasttext=this;"&gt;\n\n&lt;/form&gt;\n&lt;a href="#" onClick="doinsert_ie();"&gt;Insert IE&lt;/a&gt;\n&lt;br&gt;\n&lt;a href="#" onClick="doinsert_ff();"&gt;Insert FF&lt;/a&gt;\n&lt;/body&gt;&lt;/html&gt;\n</code></pre>\n\n<p>This will also work with textareas.  I don\'t know how to reposition the cursor so it stays at the insertion point.</p>\n'}, {'answer_id': 14401812, 'author': 'CraigDub', 'author_id': 1983541, 'author_profile': 'https://Stackoverflow.com/users/1983541', 'pm_score': 0, 'selected': False, 'text': '<p>A butchered version of @bmb code in previous answer works well to reposition the cursor at end of inserted characters too:</p>\n\n<pre><code>var lasttext;\n\nfunction doinsert_ie() {\n var ttInsert = "bla";\n lasttext.focus();\n var sel = document.selection.createRange();\n sel.text = ttInsert;\n sel.select();\n}\n\nfunction doinsert_ff() {\n var oldtext = lasttext.value;\n var curposS = lasttext.selectionStart;\n var curposF = lasttext.selectionEnd;\n pretext = oldtext.substring(0,curposS);\n posttest = oldtext.substring(curposF,oldtext.length);\n var ttInsert=\'bla\';\n lasttext.value = pretext + ttInsert + posttest;\n lasttext.selectionStart=curposS+ttInsert.length;\n lasttext.selectionEnd=curposS+ttInsert.length;\n}\n</code></pre>\n'}]
['https://Stackoverflow.com/questions/54147', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1523/']