How do I insert a character at the caret with java

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.

标签： javascript

6条回答

▲ chillily

2楼-- · 2020-03-01 10:51

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.

0人赞添加讨论(0) 举报

爱情/是我丢掉的垃圾

3楼-- · 2020-03-01 10:54

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.

0人赞添加讨论(0) 举报

倾城　Initia

4楼-- · 2020-03-01 10:58

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';
}

0人赞添加讨论(0) 举报

爷、活的狠高调

5楼-- · 2020-03-01 11:06

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

0人赞添加讨论(0) 举报

看我几分像从前

6楼-- · 2020-03-01 11:11

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';

0人赞添加讨论(0) 举报

疯言疯语

7楼-- · 2020-03-01 11:13

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;
}

0人赞添加讨论(0) 举报

How do I insert a character at the caret with java

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间