How do I insert a character at the caret with javascript?

I want to insert some special characters at the caret inside textboxes using javascript on a button. How can this be done?

The script needs to find the active textbox and insert the character at the caret in that textbox. The script also needs to work in IE and Firefox.

EDIT: It is also ok to insert the character "last" in the previously active textbox.

Answers:

Answer

I think Jason Cohen is incorrect. The caret position is preserved when focus is lost.

[Edit: Added code for FireFox that I didn't have originally.]

[Edit: Added code to determine the most recent active text box.]

First, you can use each text box's onBlur event to set a variable to "this" so you always know the most recent active text box.

Then, there's an IE way to get the cursor position that also works in Opera, and an easier way in Firefox.

In IE the basic concept is to use the document.selection object and put some text into the selection. Then, using indexOf, you can get the position of the text you added.

In FireFox, there's a method called selectionStart that will give you the cursor position.

Once you have the cursor position, you overwrite the whole text.value with

text before the cursor position + the text you want to insert + the text after the cursor position

Here is an example with separate links for IE and FireFox. You can use you favorite browser detection method to figure out which code to run.

<html><head></head><body>

<script language="JavaScript">
<!--

var lasttext;

function doinsert_ie() {
    var oldtext = lasttext.value;
    var marker = "##MARKER##";
    lasttext.focus();
    var sel = document.selection.createRange();
    sel.text = marker;
    var tmptext = lasttext.value;
    var curpos = tmptext.indexOf(marker);
    pretext = oldtext.substring(0,curpos);
    posttest = oldtext.substring(curpos,oldtext.length);
    lasttext.value = pretext + "|" + posttest;
}

function doinsert_ff() {
    var oldtext = lasttext.value;
    var curpos = lasttext.selectionStart;
    pretext = oldtext.substring(0,curpos);
    posttest = oldtext.substring(curpos,oldtext.length);
    lasttext.value = pretext + "|" + posttest;
}

-->
</script>


<form name="testform">
<input type="text" name="testtext1" onBlur="lasttext=this;">
<input type="text" name="testtext2" onBlur="lasttext=this;">
<input type="text" name="testtext3" onBlur="lasttext=this;">

</form>
<a href="#" onClick="doinsert_ie();">Insert IE</a>
<br>
<a href="#" onClick="doinsert_ff();">Insert FF</a>
</body></html>

This will also work with textareas. I don't know how to reposition the cursor so it stays at the insertion point.

Answer

In light of your update:

var inputs = document.getElementsByTagName('input');
var lastTextBox = null;

for(var i = 0; i < inputs.length; i++)
{
  if(inputs[i].getAttribute('type') == 'text')
  {
    inputs[i].onfocus = function() {
      lastTextBox = this;
    }
  }
}

var button = document.getElementById("YOURBUTTONID");
button.onclick = function() {
  lastTextBox.value += 'PUTYOURTEXTHERE';
}
Answer

Note that if the user pushes a button, focus on the textbox will be lost and there will be no caret position!

Answer

loop over all you input fields... finding the one that has focus.. then once you have your text area... you should be able to do something like...

myTextArea.value = 'text to insert in the text area goes here';

Answer

I'm not sure if you can capture the caret position, but if you can, you can avoid Jason Cohen's concern by capturing the location (in relation to the string) using the text box's onblur event.

Answer

A butchered version of @bmb code in previous answer works well to reposition the cursor at end of inserted characters too:

var lasttext;

function doinsert_ie() {
 var ttInsert = "bla";
 lasttext.focus();
 var sel = document.selection.createRange();
 sel.text = ttInsert;
 sel.select();
}

function doinsert_ff() {
 var oldtext = lasttext.value;
 var curposS = lasttext.selectionStart;
 var curposF = lasttext.selectionEnd;
 pretext = oldtext.substring(0,curposS);
 posttest = oldtext.substring(curposF,oldtext.length);
 var ttInsert='bla';
 lasttext.value = pretext + ttInsert + posttest;
 lasttext.selectionStart=curposS+ttInsert.length;
 lasttext.selectionEnd=curposS+ttInsert.length;
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.