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?
Abercrombie And Fitch Feb 19, 2010
Thank you very much for your geat post,Learned a lot and saw a lot about a lot!
Yeni Diziler Mar 02, 2010
Thank you very much for your geat post...