Insert text at current cursor position in TextArea

[balabaster]

How do I insert text into a textarea at the current cursor position in JavaScript?

[pronerd]

I do not think you can do that. I do not know of any events that will give you the position of the cursor/carrot in a text field. There is a way to get selected text, and then replace, modify, remove that text.

[rnd me]

javascript cannot do it?

ha, that's a new one...

for FF:

function insertText(textBox, strNewText){
  var tb = textBox;
  var first = tb.value.slice(0, tb.selectionStart);
  var second = tb.value.slice(tb.selectionStart);
  tb.value = first + strNewText + second;
}

an ie version is far more complicated, do you need it?

[balabaster]

javascript cannot do it?

ha, that's a new one...

for FF:

function insertText(textBox, strNewText){
  var tb = textBox;
  var first = tb.value.slice(0, tb.selectionStart);
  var second = tb.value.slice(tb.selectionStart);
  tb.value = first + strNewText + second;
}

an ie version is far more complicated, do you need it?

I've got something that kind-of works in IE. It's a little buggy, but I haven't had time to work out the bugs yet. If you've got something that works in IE, I'd be happy to see it.

[rnd me]

I've got something that kind-of works in IE. It's a little buggy, but I haven't had time to work out the bugs yet. If you've got something that works in IE, I'd be happy to see it.

well i threw the firefox code together off the top of my head.

turns out i guess i don't have an ie version of this.
i have code that happily wraps (fore example) "<b>xxx</b>" around selected text in a textarea, but if there is no selection at all, it doesn't work.

one crappy workaround i thought up would be to use execCommand("pa ste") to insert the clipboard into the text. haven't tested this on textareas though.

you could use another function to gain raw access to the clipboard from javascript:

function CB() //sets or read clipboard in IE accepts 1 arg to set, returns cb when empty
{
if (arguments.length)     {window.clipboardData.setData('Text', arguments[0])}
else 	{ return window.clipboardData.getData('Text')}
 }//end CB

using it, you could then
1. backup the current clipboard text to a var
2. set the clipboard to the string to be inserted.
3. execCommand("pa ste")
4. set the clipboard to the var from step 1.

this could ruin the user's clipboard if he has for instance, and image or file on the clipboard, but would be ok if he had just plain text.

[balabaster]

well i threw the firefox code together off the top of my head.

turns out i guess i don't have an ie version of this.
i have code that happily wraps (fore example) "<b>xxx</b>" around selected text in a textarea, but if there is no selection at all, it doesn't work.

one crappy workaround i thought up would be to use execCommand("pa ste") to insert the clipboard into the text. haven't tested this on textareas though.

you could use another function to gain raw access to the clipboard from javascript:

function CB() //sets or read clipboard in IE accepts 1 arg to set, returns cb when empty
{
if (arguments.length)     {window.clipboardData.setData('Text', arguments[0])}
else 	{ return window.clipboardData.getData('Text')}
 }//end CB

using it, you could then
1. backup the current clipboard text to a var
2. set the clipboard to the string to be inserted.
3. execCommand("pa ste")
4. set the clipboard to the var from step 1.

this could ruin the user's clipboard if he has for instance, and image or file on the clipboard, but would be ok if he had just plain text.

In addition, the user would be prompted with an annoying message asking them if the application can have access to their clipboard... so that rules that option out.

[rnd me]

In addition, the user would be prompted with an annoying message asking them if the application can have access to their clipboard... so that rules that option out.

bummer.
it sucks that IE has this limitation.

just one more thought:

IE supports VBscript.
VBscript has a sendkeys method.
perhaps you could send a weird char or two to the input, like "^~^" at the cursor.
you could then run a simple replace on the whole value to "insert" the text.

i don't know enough about vbscript to throw together some code, but you should be able to use both languages on the same page. you might need to staple it together using a hidden input.
and easy way to talk between js and vb is to use input.value (easily accessible from both) to pass a string. you can bind both vb and js event to the same input.
each half of the code should only be a couple lines.

just an idea, not sure if it's a good one.

[balabaster]

IE supports VBscript.
VBscript has a sendkeys method.
perhaps you could send a weird char or two to the input, like "^~^" at the cursor.
you could then run a simple replace on the whole value to "insert" the text.

Interesting thought... I'll have a play and see what I can come up with.

[acoder]

Is this any help?

[Frinavale]

This thread might help too...

-Frinny

[rnd me]

hooray!
thanks acoder. the article was kinda overkill, but a comment posted on the page revealed the gem below.

this seems to work as long as textarea is in focus:

var text = "hello world"
document.selection.createRange().text=text;

if used from a button, clicking the button will blur the textarea.
give it a textAreaObject. focus() right before to be safe.

[balabaster]

hooray!
thanks acoder. the article was kinda overkill, but a comment posted on the page revealed the gem below.

this seems to work as long as textarea is in focus:

var text = "hello world"
document.selection.createRange().text=text;

if used from a button, clicking the button will blur the textarea.
give it a textAreaObject. focus() right before to be safe.

Thanks guys, that's kind of what I have, it's just a little buggy...

[acoder]

What problems are you having with it?

Have you tried the link in the thread posted by Frinavale?