How can I insert text before and after the selection in a textarea with JavaScript?
Selection occurs into a textarea field of an HTML form.
- Do you need broad browser support or will the modern browsers suffice (in other words, no IE at least until 9 comes out)?Hemlock– Hemlock2011-01-17 14:42:22 +00:00Commented Jan 17, 2011 at 14:42
Add a comment |
2 Answers
Try the following:
var selectionText = yourTextarea.value.substr(yourTextarea.selectionStart, yourTextarea.selectionEnd); yourTextarea.value = "Text before" + selectionText + "Text after"; If you want to search and replace, then the following code will do the trick (in non-Internet Explorer browsers):
var textBeforeSelection = yourTextarea.value.substr(0, yourTextarea.selectionStart); var textAfterSelection = yourTextarea.value.substr(yourTextarea.selectionEnd, yourTextarea.value.length); yourTextarea.value = textBeforeSelection + " new selection text " + textAfterSelection; 
4 Comments
Hemlock
You'll need to do something else for IE if you want to support it.
Riccardo
I think the sample above will replace the whole textarea content... maybe there's a way to search & replace?
Matschie
If you want to search + replace then you could just read the text until the selection and then the one until the end. I will edit the abov answer to show you exactly what I mean.
Tim Down
@Riccardo: No, jQuery doesn't handle this, although there are jQuery plug-ins that do.
Her us a simple script that works in both Internet Explorer, Firefox, and Chrome, where myField is a object reference. It was assembled by several scripts found through the web.
function insertAtCursor(myField, myValueBefore, myValueAfter) { if (document.selection) { myField.focus(); document.selection.createRange().text = myValueBefore + document.selection.createRange().text + myValueAfter; } else if (myField.selectionStart || myField.selectionStart == '0') { var startPos = myField.selectionStart; var endPos = myField.selectionEnd; myField.value = myField.value.substring(0, startPos) + myValueBefore + myField.value.substring(startPos, endPos) + myValueAfter + myField.value.substring(endPos, myField.value.length); } } 
2 Comments
Frug
However it doesn't place the cursor after the closing tags when it's done.
skaveesh
For those who are looking for to focus the caret inside the textarea,
myField.focus(); myField.selectionStart = startPos + myValueBefore.length; myField.selectionEnd = endPos + myValueBefore.length; insert this code inside the 'if else' condition at the end.