Question

我想在按钮上使用javascript在文本框内的插入符号中插入一些特殊字符。怎么办呢？

脚本需要找到活动文本框并将角色插入该文本框中的插入符号。该脚本还需要在IE和Firefox中工作。

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

Answer 1

我认为Jason Cohen是不正确的。当焦点丢失时，插入位置会被保留。

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

[修改：添加了代码以确定最新的有效文本框。]

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

然后，有一种IE方式可以获得在Opera中也能运行的光标位置，并且在Firefox中更容易。

在IE中，基本概念是使用document.selection对象并将一些文本放入选择中。然后，使用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>

这也适用于textareas。我不知道如何重新定位光标，使其保持在插入点。

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

Answer 3

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

Answer 4

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

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

Answer 5

我不确定你是否可以捕捉插入位置，但如果可以，你可以通过使用文本框的onblur事件捕获位置（与字符串相关）来避免Jason Cohen的担忧。 / p>

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

如何使用javascript在插入符号中插入字符？

6 个答案: