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

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

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

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

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

编辑:也可以在先前处于活动状态的文本框中插入字符" last"。


我认为杰森·科恩(Jason Cohen)是不正确的。失去焦点时,插入符号的位置将保留。

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

[编辑:添加了确定最新活动文本框的代码。]

首先,您可以使用每个文本框的onBlur事件将变量设置为" this",以便始终了解最新的活动文本框。

然后,有一种IE方式也可以在Opera中使用它来获取光标位置,而在Firefox中则更容易。

在IE中,基本概念是使用document.selection对象并将一些文本放入选择中。然后,使用indexOf,可以获得添加的文本的位置。

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

一旦有了光标位置,就可以用

覆盖整个text.value

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

这里是一个带有IE和FireFox单独链接的示例。您可以使用自己喜欢的浏览器检测方法来找出要运行的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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;
}

-->



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

Insert FF
</body></html>

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


根据您的更新:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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';
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
}

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


循环遍历所有输入字段...
找到一个有重点的人..
然后当您拥有文字区域时...
您应该能够执行类似...

myTextArea.value ='要在文本区域中插入的文本在此处';


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


推荐阅读

    linux中替换字符命令?

    linux中替换字符命令?,工作,地址,系统,命令,资料,数据,信息,商业,管理,目录,L

    linux拼接字符串命令?

    linux拼接字符串命令?,系统,工作,代码,工具,名称,信息,地址,时间,数据,命令,l

    linux命令下写脚本?

    linux命令下写脚本?,服务,系统,环境,代码,名称,命令,脚本,发行,在线,情况,三

    linux图形转字符命令?

    linux图形转字符命令?,系统,电脑,密码,界面,情况,地方,工具,图形界面,字符,

    linux把命令变成脚本?

    linux把命令变成脚本?,系统,环境,工作,脚本,命令,信息,基础,代码,文件,变量,

    linux隐藏字符的命令?

    linux隐藏字符的命令?,工作,地址,系统,发行,信息,标准,管理,命令,目录,文件,

    脚本调用linux命令?

    脚本调用linux命令?,代码,系统,工作,底部,脚本,位置,环境,行用,官网,标准,typ

    linux命令行最大字符?

    linux命令行最大字符?,系统,工作,数字,地址,等级,设备,软件,信息,标准,设计,l

    添加字符串命令linux?

    添加字符串命令linux?,情况,名称,文件,位置,名字,地方,连续,信息,命令,内容,L

    linux替换文本命令?

    linux替换文本命令?,信息,系统,命令,内容,文件,文本,字符串,字符集,单词,字

    linux替换文本的命令?

    linux替换文本的命令?,系统,地址,工作,信息,命令,标准,数据,内容,文件,字符

    linux脚本命令输信息?

    linux脚本命令输信息?,系统,信息,代码,脚本,数据,工具,发行,命令,变量,文件,l

    linux上启动脚本命令?

    linux上启动脚本命令?,服务,状态,系统,代码,脚本,工作,周期性,命令,文件,方

    linux命令行大字符?

    linux命令行大字符?,工作,地址,系统,信息,管理,第一,发行,在线,最新,标准,lin

    linux下编写脚本命令?

    linux下编写脚本命令?,代码,时间,工具,标准,系统,实战,平台,最新,网站,文件,l

    linux编辑文本命令行?

    linux编辑文本命令行?,工作,系统,信息,状态,地址,命令,管理,标准,目录,文件,L

    linux定时器脚本命令?

    linux定时器脚本命令?,系统,代码,时间,工具,工作,定期,周期性,异常,任务,脚

    linux命令查找字符串?

    linux命令查找字符串?,工具,信息,命令,字符串,系统,工作,文件,范本,样式,文

    linux查看文本的命令?

    linux查看文本的命令?,系统,工作,标准,信息,命令,管理,数据,文件,目录,时间,L

    linux停止脚本命令行?

    linux停止脚本命令行?,系统,工作,平台,命令,基础,第一,环境,信息,终端,程序,