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

前端未结

关注

 6  958

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 textbo

相关标签:

6条回答

甜味超标

2021-01-02 06:23

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)

北海茫月

2021-01-02 06:24

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

慢半拍i

2021-01-02 06:33

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)

-上瘾入骨i

2021-01-02 06:39
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">

</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)
发布评论:

提交评论
- 加载中...
囚心锁ツ

2021-01-02 06:43

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)
发布评论:

提交评论
- 加载中...
半阙折子戏

2021-01-02 06:47

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)
发布评论:

提交评论
- 加载中...