Scott Klarr Jr
How to insert text into a textarea where the cursor is
Posted On Oct 11, 2008 at 10:16 pm
This javascript function will allow you to easily inject text into a textarea wherever the caret/cursor is currently at. In addition, it also makes sure that the cursor and textarea scroll amount are in the correct place after the insertion. I have tested and verified this works in Firefox, IE7, Opera, Flock, Safari, and Maxthon.
function insertAtCaret(areaId,text) {
var txtarea = document.getElementById(areaId);
var scrollPos = txtarea.scrollTop;
var strPos = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
"ff" : (document.selection ? "ie" : false ) );
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
strPos = range.text.length;
}
else if (br == "ff") strPos = txtarea.selectionStart;
var front = (txtarea.value).substring(0,strPos);
var back = (txtarea.value).substring(strPos,txtarea.value.length);
txtarea.value=front+text+back;
strPos = strPos + text.length;
if (br == "ie") {
txtarea.focus();
var range = document.selection.createRange();
range.moveStart ('character', -txtarea.value.length);
range.moveStart ('character', strPos);
range.moveEnd ('character', 0);
range.select();
}
else if (br == "ff") {
txtarea.selectionStart = strPos;
txtarea.selectionEnd = strPos;
txtarea.focus();
}
txtarea.scrollTop = scrollPos;
}
Usage: insertAtCaret('idOfTextarea','Text To Inject');
<textarea id="messageBody"></textarea>
<input type="button" value="Insert Smiley"
onclick="insertAtCaret('messageBody',':)');" />
![How Washington plows the snow. [img]](http://i.imgur.com/o8jCW.png){kind=link}
heldrida Feb 12, 2009
Hi,
thanks for your code! It was the only that actually worked for IE7!
I've been trying to handle this, from a iframe triggering the function, trough window.parent or window.top, all other codes (visit lots of websites, more then 30) and yours is the ONLY that actually worked! Didnt lost focus, and I could keep adding new strings!
Thanks!
Boss Mar 20, 2009
Hi,
Thanks for your code, it worked really well!
But do you have any idea or suggestion, let say if I'm doing smiley insertion to textarea but using different browser, where the clickable image will be open in a new window.
Thanks.
Boss Mar 20, 2009
Hi,
I've just figured it out by replacing var txtarea = document.getElementById(areaId); to var txtarea = window.opener.document.getElementById(areaId);
Correct me I'm wrong. Anyway, thank you so much for your coding. I wouldn't figured it out if you doesn't supplied this code at the first place. :)
Thanks.
David Winstead Aug 24, 2009
Hello,
Thank you for the great code! I'm using it in a new project for a content management system where users can add smileys to comments.
Keep up the good work!!
Josh B. Sep 20, 2009
This is a great function. One question (or feature request?) -- When I was testing this out I noticed that selected text in the textarea is not replaced by the inserted text, which is the typical behavior I would expect -- is this intentional? If yes, it would be a great enhancement to be able to toggle "replace selection" on/off.
Thanks again.
Aakash Oct 16, 2009
Hi,
Thanks for this very great code. This really helped me.
Mark Kucera Nov 24, 2009
This is a cool little function. I've been looking for just this type of functionality. However I'm noticing that it isn't working right in IE 8. Firefox and Safari (PC version) seem to work fine, but with IE the text is just appended to the end of the text. I'm going to see if i can figure out whats going on, but i'm not super familiar with all this javascript code. Has anyone else gotten this to work in IE8? If so, please post here.
Thanks!
-Mark
Omar Nov 30, 2009
Thank you! Help a lot, I'm modifying the caret position but this code is golden!
trixie Dec 04, 2009
hi, can you help me use this on friendster?
Oliver Bock Mar 28, 2010
The IE code can (at least on IE8) be simplified using
range.text = "text to replace selection";
Aigarinsh May 18, 2010
This code has bugs. Look at it again and you will find incorrect syntax. For me it seems that this line
else if (br == "ff") strPos = txtarea.selectionStart;
should be
else if (br == "ff") {strPos = txtarea.selectionStart;}
Aigarinsh May 18, 2010
But actually it still is not working correctly in IE
Luciano Jun 21, 2010
Great script, thanks!
I actually found it here extended as a jquery method:
http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery/2819568#2819568
thanks again
Alex Jul 29, 2010
works great, thank you!