Connecting Tech Pros Worldwide
 
 
sign in | join about | help | sitemap
[ http://bytes.com/adLoader.php?parent=webdev
balabaster's Avatar

Insert text at current cursor position in TextArea


Question posted by: balabaster (Expert) on October 7th, 2008 07:34 PM
How do I insert text into a textarea at the current cursor position in JavaScript?
post reply
Quote | Subscribe
12 Answers Posted
pronerd's Avatar
Expert - 351 Posts
#2: Re: Insert text at current cursor position in TextArea

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's Avatar
Expert - 355 Posts
#3: Re: Insert text at current cursor position in TextArea

javascript cannot do it?

ha, that's a new one...

for FF:

Expand|Select|Wrap|Line Numbers
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's Avatar
Expert - 563 Posts
#4: Re: Insert text at current cursor position in TextArea

Quote:
Originally Posted by rnd me
javascript cannot do it?

ha, that's a new one...

for FF:

Expand|Select|Wrap|Line Numbers
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's Avatar
Expert - 355 Posts
#5: Re: Insert text at current cursor position in TextArea

Quote:
Originally Posted by balabaster
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
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("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.
balabaster's Avatar
Expert - 563 Posts
#6: Re: Insert text at current cursor position in TextArea

Quote:
Originally Posted by rnd me
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
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("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.
rnd me's Avatar
Expert - 355 Posts
#7: Re: Insert text at current cursor position in TextArea

Quote:
Originally Posted by balabaster
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's Avatar
Expert - 563 Posts
#8: Re: Insert text at current cursor position in TextArea

Quote:
Originally Posted by rnd me
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's Avatar
Site Moderator - 12,475 Posts
#9: Re: Insert text at current cursor position in TextArea

Is this any help?
Frinavale's Avatar
Forum Leader - 2,539 Posts
#10: Re: Insert text at current cursor position in TextArea

This thread might help too...

-Frinny
rnd me's Avatar
Expert - 355 Posts
#11: Re: Insert text at current cursor position in TextArea

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
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's Avatar
Expert - 563 Posts
#12: Re: Insert text at current cursor position in TextArea

Quote:
Originally Posted by 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:

Expand|Select|Wrap|Line Numbers
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's Avatar
Site Moderator - 12,475 Posts
#13: Re: Insert text at current cursor position in TextArea

What problems are you having with it?

Have you tried the link in the thread posted by Frinavale?
Reply
Not the answer you were looking for? Post your question . . .
196,220 members ready to help you find a solution.
Join Bytes.com

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 196,220 network members.
Post your question now . . .
It's fast and it's free

Popular Articles

Top Javascript / DHTML / Ajax Contributors

[ http://bytes.com/adLoader.php?parent=webdev


You are viewing a mobilized version of this site...
View original page here

How do you rate mobile version of this page?

Mobilized by Mowser Mowser