By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,850 Members | 1,895 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,850 IT Pros & Developers. It's quick & easy.

Insert text at current cursor position in TextArea

balabaster
Expert 100+
P: 797
How do I insert text into a textarea at the current cursor position in JavaScript?
Oct 7 '08 #1
Share this Question
Share on Google+
12 Replies


Expert 100+
P: 392
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.
Oct 7 '08 #2

rnd me
Expert 100+
P: 427
javascript cannot do it?

ha, that's a new one...

for FF:

Expand|Select|Wrap|Line Numbers
  1. function insertText(textBox, strNewText){
  2.   var tb = textBox;
  3.   var first = tb.value.slice(0, tb.selectionStart);
  4.   var second = tb.value.slice(tb.selectionStart);
  5.   tb.value = first + strNewText + second;
  6. }
an ie version is far more complicated, do you need it?
Oct 7 '08 #3

balabaster
Expert 100+
P: 797
javascript cannot do it?

ha, that's a new one...

for FF:

Expand|Select|Wrap|Line Numbers
  1. function insertText(textBox, strNewText){
  2.   var tb = textBox;
  3.   var first = tb.value.slice(0, tb.selectionStart);
  4.   var second = tb.value.slice(tb.selectionStart);
  5.   tb.value = first + strNewText + second;
  6. }
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.
Oct 8 '08 #4

rnd me
Expert 100+
P: 427
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("paste") 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:


Expand|Select|Wrap|Line Numbers
  1. function CB() //sets or read clipboard in IE accepts 1 arg to set, returns cb when empty
  2. {
  3. if (arguments.length)     {window.clipboardData.setData('Text', arguments[0])}
  4. else     { return window.clipboardData.getData('Text')}
  5.  }//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("paste")
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.
Oct 8 '08 #5

balabaster
Expert 100+
P: 797
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("paste") 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:


Expand|Select|Wrap|Line Numbers
  1. function CB() //sets or read clipboard in IE accepts 1 arg to set, returns cb when empty
  2. {
  3. if (arguments.length)     {window.clipboardData.setData('Text', arguments[0])}
  4. else     { return window.clipboardData.getData('Text')}
  5.  }//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("paste")
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.
Oct 9 '08 #6

rnd me
Expert 100+
P: 427
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.
Oct 9 '08 #7

balabaster
Expert 100+
P: 797
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.
Oct 9 '08 #8

acoder
Expert Mod 15k+
P: 16,027
Is this any help?
Oct 9 '08 #9

Frinavale
Expert Mod 5K+
P: 9,731
This thread might help too...

-Frinny
Oct 9 '08 #10

rnd me
Expert 100+
P: 427
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:

Expand|Select|Wrap|Line Numbers
  1. var text = "hello world"
  2. 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.
Oct 9 '08 #11

balabaster
Expert 100+
P: 797
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:

Expand|Select|Wrap|Line Numbers
  1. var text = "hello world"
  2. 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...
Oct 9 '08 #12

acoder
Expert Mod 15k+
P: 16,027
What problems are you having with it?

Have you tried the link in the thread posted by Frinavale?
Oct 10 '08 #13

Post your reply

Sign in to post your reply or Sign up for a free account.