如何使用 javascript 在插入符号处插入字符？答案

【问题标题】：How do I insert a character at the caret with javascript?如何使用 javascript 在插入符号处插入字符？
【发布时间】：2008-09-10 14:14:48
【问题描述】：

我想在按钮上使用 javascript 在文本框内的插入符号处插入一些特殊字符。如何做到这一点？

脚本需要找到活动的文本框并在该文本框中的插入符号处插入字符。该脚本还需要在 IE 和 Firefox 中运行。

编辑：也可以在之前激活的文本框中插入字符“last”。

【问题讨论】：

标签： javascript

【解决方案1】：

我认为 Jason Cohen 是不正确的。失去焦点时会保留插入符号的位置。

[编辑：添加了我最初没有的 FireFox 代码。]

[编辑：添加代码以确定最近的活动文本框。]

首先，您可以使用每个文本框的 onBlur 事件将变量设置为“this”，以便您始终知道最近的活动文本框。

然后，还有一种 IE 获取光标位置的方法，在 Opera 中也可以使用，而在 Firefox 中则更简单。

在 IE 中的基本概念是使用 document.selection 对象和 put 一些文本 into 选择。然后，使用 indexOf，就可以得到你添加的文本的位置。

在 FireFox 中，有一个名为 selectionStart 的方法可以为您提供光标位置。

一旦有了光标位置，就用

覆盖整个 text.value

光标位置之前的文本+要插入的文本+光标位置之后的文本

这是一个示例，其中包含 IE 和 FireFox 的单独链接。您可以使用您喜欢的浏览器检测方法来确定要运行的代码。

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

这也适用于文本区域。我不知道如何重新定位光标，使其停留在插入点。

【讨论】：

在 FF 4 中，这可以使用 elem.setSelectionRange(from,to) 来完成，并为 'from' 和 'to' 使用相同的值，您可以使用 curpos var + 插入字符串的长度，如下所示：@ 987654323@ 假设使用 newstring 而不是管道。虽然我不知道如何在 IE 中实现这一点......而且我还没有在任何其他浏览器上测试过......

【解决方案2】：

根据您的更新：

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

【讨论】：

【解决方案3】：

请注意，如果用户按下按钮，文本框上的焦点将丢失，并且没有插入符号位置！

【讨论】：

我不确定你想说什么。正如我的示例所示，您甚至可以从没有焦点的元素中获取光标位置。

【解决方案4】：

遍历所有输入字段... 找到一个有焦点的.. 那么一旦你有了你的文本区域...... 你应该能够做类似...

myTextArea.value = '要插入到文本区域的文本到这里';

【讨论】：

【解决方案5】：

我不确定您是否可以捕获插入符号的位置，但如果可以，您可以通过使用文本框的 onblur 事件捕获位置（相对于字符串）来避免 Jason Cohen 的担忧。

【讨论】：

【解决方案6】：

先前答案中@bmb 代码的屠宰版本也可以很好地将光标重新定位在插入字符的末尾：

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

【讨论】：