Insert text on textarea in cursor position

@theSCIENTISTNov 28.2003

Hi all,
I’m new at this forums, and I have a little problem that I hope some of you might be able to solve.

I want to add a predefined piece of text to a textarea but where the blinking cursor is, and not by the end of it.

I have the following:

~~[COLOR=blue]~~<IMG SRC=”grfx/smilie_01.gif” ALIGN=”absmiddle” onClick=”addSMILIE(‘[?]’)” STYLE=”cursor: hand;”>[/COLOR]

This adds the [?] to the textarea fine, but always by the end, and not where the input cursor is, here’s the function I’m using:

~~[COLOR=blue]~~
function addSMILIE(code) {
document.frmPROPA.txtNEWS.focus();
document.frmPROPA.txtNEWS.value += (code);
}
[/COLOR]

How to add the text to the textarea but where the input blinking cursor is and not by the end of it?

Thanks.

These forums will parse 8) by the smile, so where you see a smile here is in fact 8)

to post a comment

JavaScript

7 Comments(s) _↴

@GollumNov 28.2003 — #I don't think that what you want is possible (at least not on all or even most browsers)

You may have heard of TextRange objects supported by IE, but I've noticed that if nothing is selected (i.e. blinking cursor time) then things get inserted before the TextArea.

You will notice that the TextArea used in this forum doesn't insert at the cursor, but at the end of the current text

If you have any more luck in this area, let us know.

@theSCIENTISTauthorNov 28.2003 — #I think it's possible, but I've been looking at the Javascript references and can't find anything relating to the cursor position, if at least I could get the cursor position I could do it like this:

Copy everything to the left of the cursor to a variable, then copy everything to the right of the cursor to another var, then replace the contents of the textarea with varLEFT + Smilie + varRIGHT.

The problem is that I can't get the cursor position in Javascript, I've seen this done in some other forums, I guess I will dwelve into the code to see how they do it.

Solution anyone?

@PittimannNov 28.2003 — #Hi!

Here is some code which works fine in IE. It is based on what Gollum said (TextRange objects).

To avoid something being inserted in the body, there is some check in the code to find out,

if the textarea is having the focus, when the smilie is clicked.

The stuff works with blinking cursor (simply inserts text at corsor position)

and selection in the Textarea (which will be replaced by the smilie).

Actually, I just cut a fragment of a huge script which I am using for completely different purposes.

[code=php]
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
 <html>
 <head><title>Insert smilie</title>
 <script type="text/javascript">
 var whohasfocus=0;
 var str;
 function saveCursorPosition(obj){
 if (obj.createTextRange){
 obj.selection = document.selection.createRange().duplicate();
 }
 return true;
 }
 function insertAtCursorPosition(myTextArea, smilie) {
 if (whohasfocus!=3) alert('Cursor not in textfield');
 
 if (whohasfocus==3){
 str = smilie;
 if (myTextArea.createTextRange && myTextArea.selection) {
 var objTxtRange = myTextArea.selection;
 objTxtRange2=objTxtRange.text;
 objTxtRange.text = (objTxtRange.text.charAt(objTxtRange.text.length - 1) == ' ') ? str + ' ' : str;
 myTextArea.selection = null;
 }
 else {
 myTextArea.value += str;
 }
 document.myForm.myTextArea.focus();
 return true;
 whohasfocus=0;
 }
 }
 </script>
 </head>
 <body onload="document.myForm.myTextArea.focus()" onClick="whohasfocus=0;return saveCursorPosition(document.myForm.myTextArea);" onMouseOver="return saveCursorPosition(document.myForm.myTextArea);">
 <form name="myForm" title="Click here to insert smilie..." onsubmit="return false;">
 <center><a href="#" onClick="return insertAtCursorPosition(document.myForm.myTextArea, ':)');">:)</a><br>
 <textarea onDrag onBlur="javascript:whohasfocus=3" onFocus="javascript:whohasfocus=0" wrap="on" name="myTextArea" cols="40" rows="4" onSelect="return saveCursorPosition(this);" onClick="return saveCursorPosition(this);" onKeyup="return saveCursorPosition(this);"></textarea>
 </form></center>
 </body>
 </html>
 [/code]

As I only use the full script for "administrative" purposes, I didn't have to deal with browser compatibility.

What I know is:

Opera inserts the text (smilie) at the end of the text already in the textarea and set the focus elsewehere after that.

NS 4.7 also inserts at the end and places the cursor at the beginning of the textarea.

My assumption is, that other browsers will do similar things

(means: the script does not degrade really well with different browsers).

So - theSCIENTIST - it's up to you to decide to play with that script and use it.

You should know, that non IE users might get annoyed with the fact,

that the cursor will disappear or be placed somewhere in the desert.

If you like to avoid that you will have to add browser check and focus handling for browsers other than IE.

Cheers - Pit

@GollumNov 28.2003 — #Hold on a sec while I eat my words ?

I had a look around and found this technique (works in IE only tho).

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 function storeCaret(ftext) 
 {
 if (ftext.createTextRange) 
 {
 ftext.caretPos = document.selection.createRange().duplicate();
 }
 }
 
 function insertsmilie(smilieface) 
 {
 var t = document.f.t;
 if (t.createTextRange &amp;&amp; t.caretPos) 
 {
 var caretPos = t.caretPos;
 caretPos.text = smilieface;
 t.focus();
 }
 else 
 {
 t.value+=smilieface;
 t.focus();
 }
 }
 &lt;/script&gt;
 &lt;body&gt;
 &lt;form name=f&gt;
 &lt;textarea name=t onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onchange="storeCaret(this);"&gt;Text goes here&lt;/textarea&gt;&lt;br&gt;
 &lt;button onclick="insertsmilie('8)');"&gt;Press&lt;/button&gt;&lt;br&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@theSCIENTISTauthorNov 28.2003 — #Yep, both approaches are similar and work well in IE.

Things to do now:

In IE: Get the cursor blinking after a selection > insert operation (The cursor disappears after such operation) and when clicked twice it will replace/add.

In other browsers: Get the cursor to stay after the insertion, strange, I though Javascrit was multi browser, multi platform compatible, still behaves differently.

Anyway, thx to both of you for the excellent input on the matter.

@PittimannNov 28.2003 — #Hi!

You're welcome!

Javascript is multi browser, multi platform compatible - the textrange object has been implemented by Microsoft (I use their products but I hate their product and versions' policy!); that's why it just works in MSIE.

Btw - when I had the same problem like you, I browsed the Microsoft sites and I found that textrange stuff. After that I tried, to get things work like you want them to work also in other browsers. After torturing search engines for quite a while I gave up - at least as far as Javascript is concerned. Doing some fixes concernig the cursor (at least place it at the end of the text after having inserted the smilie) shouldn't be a problem, but to get things inserted at the cursor position by means of Javascript seems impossible. Even though a long time ago, I found out, that Netscape is able to "remember" the position. But I didn't find any place, where it is stored...

Cheers - Pit

@theSCIENTISTauthorNov 29.2003 — #Thx Pit, I'll see what else can I do, but it will most likely stay as it is, as long as it works on other browsers.

Also in #JavaScript _↴

Mobile version on other phones Goto a new URL address right-pointing arrow character "undefined"

Success!

Help @theSCIENTIST spread the word by sharing this article on Twitter...

Tweet This

Insert text on textarea in cursor position

7 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Insert text on textarea in cursor position

7 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #JavaScript _↴