[Resolved] JavaScript: Insert into TextArea?

**The Hobo** · May 14th, 2003, 04:15 PM

Is there a way to insert text into a TextArea at the caret position, rather than at the end of the box?

**Danial** · May 27th, 2003, 04:51 AM

Originally posted by The Hobo
Is there a way to insert text into a TextArea at the caret position, rather than at the end of the box?

here you go, i put together a example for you.

Hope this helps.

Danial

Code:

<html>
<head>
<script>
	 function insert(txt)
	 {
	 var d;
	 d=document.form1.txtBody;

	 insertAtCaret(d, txt);
	 }

     function storeCaret (textEl) {
       if (textEl.createTextRange)
         textEl.caretPos = document.selection.createRange().duplicate();
     }

     function insertAtCaret (textEl, text) {
       if (textEl.createTextRange && textEl.caretPos) {
         var caretPos = textEl.caretPos;
         caretPos.text =
           caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
             text + ' ' : text;
       }
       else
         textEl.value   =textEl.value+ text;
     }
</script>
<body>
<a href="JavaScript:insert(' test ')">Insert Text</a>
<form name=form1>
<textarea name="txtBody" rows="20" cols="60"  style="WIDTH: 100%" ONSELECT="storeCaret(this);" ONCLICK="storeCaret(this);" ONKEYUP="storeCaret(this);">
Hello there, this is an example of how to enter text at the caret position.
</textarea>
</form>
</body>
</html>

**Danial** · May 27th, 2003, 04:52 AM

BTW, i have only tested this in IE not in any browser, please let me know if it works on any other browser.

thanks

Danial

**The Hobo** · May 27th, 2003, 03:08 PM

Works perfectly in IE. Thanks

**The Hobo** · May 27th, 2003, 03:13 PM

I had to doctor it up a bit, though.

**Danial** · May 27th, 2003, 03:17 PM

Originally posted by The Hobo
I had to doctor it up a bit, though.

Well like i said it was an example, i took it out of one of my project, and it was broken down in diffrent files and in the example here i cut and pasted it. so there might be erros. !!!

What bits did u doctor up !!

Anyway glad i could help u out.

**CornedBee** · May 28th, 2003, 01:36 AM

I'm quite sure this works ONLY in IE though, but can't test right now.

Not even sure if this thing is possible in Moz, would have to check...

**CornedBee** · May 28th, 2003, 02:05 AM

Checked the Mozilla source, there is currently no special support for textarea manipulations.

**Danial** · May 28th, 2003, 03:07 PM

Originally posted by CornedBee
Checked the Mozilla source, there is currently no special support for textarea manipulations.

Yes i remember now that i looked all over to find some code which will achieve the same thing in NS and other browser., but was unable to find any.

I doubt its even possible, i think even vB Forum doesnt have the feature in NS.

Danial

**The Hobo** · Jun 21st, 2004, 03:43 PM

I revisited this because I didn't like the fact that this feature only worked in IE for my application. After doing some searching on the web, I've put together this code.

The code was tested (and works fine) in:
FireFox 0.8
Netscape 7.1
Internet Explorer 5.5/6.0
Mozilla 1.7

Code:

<html>
<head>
    <title></title>
    <script type="text/javascript">
        function insertAtCaret(input, textString) {
            if (input.setSelectionRange) {
                var selectionStart = input.selectionStart;
                var selectionEnd = input.selectionEnd;
            
                input.value = input.value.substring(0, selectionStart) + textString + input.value.substring(selectionEnd);
            } else if (document.selection) {
                var range = document.selection.createRange();

                if (range.parentElement() == input) {
                    var isCollapsed = range.text == '';
                    range.text = textString;

                    if (!isCollapsed) {
                        range.moveStart('character', -textString.length);
                        range.select();
                    }
                } else {
                    var caretPos = input.caretPos;

                    caretPos.text = textString;
                }
            } else {
                input.value = input.value + textString;
            }
        }

        function storeCaret (input) {
            if (input.createTextRange) {
                input.caretPos = document.selection.createRange().duplicate();
            }
        }
    </script>
</head>
<body>
    <form name="formName">
        <input type="button" value=" insert " onclick="insertAtCaret(this.form.inputName, 'asdf');" />
        <br />
        <textarea cols="20" rows="10" name="inputName" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" style="width: 400px;">Kibology</textarea>
    </form>
</body>
</html>

Let me know if there are any improvements/suggestions. Otherwise, there it is for whoever's interested.

Also, if anyone tests this in a browser/version that I haven't, please let me know how it goes.

**CornedBee** · Jun 21st, 2004, 03:47 PM

Moz 1.8a works fine.

**vbNeo** · Jun 22nd, 2004, 10:19 AM

Originally posted by CornedBee
Moz 1.8a works fine.

Isn't it the same version of Gecko? Does it really matter if you test it in both normal 'heavy' MoZilla and FireFox ?

**CornedBee** · Jun 22nd, 2004, 12:14 PM

More or less the same, yeah. Just wanted to post

**Danial** · Jun 22nd, 2004, 05:07 PM

Good work

. I will put it in my Code Library, i am sure it will come very handy.

Danial

Thread: [Resolved] JavaScript: Insert into TextArea?

Thread Tools

Display

[Resolved] JavaScript: Insert into TextArea?

Re: JavaScript: Insert into TextArea?

Posting Permissions