2008-09-10 29 views
10

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

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

编辑:也可以在前面的活动文本框中插入字符“last”。

回答

1

请注意,如果用户按下一个按钮,对文本框的焦点将会丢失,并且不会有脱字符的位置!

+0

我不知道你是想说。如我的示例所示,即使是没有焦点的元素,也可以获得光标位置。 – bmb 2008-09-22 17:00:01

0

遍历所有你输入字段... 发现具有焦点的一个.. 然后,一旦你有你的文本区域... 你应该能够做到像...

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

0

我不确定您是否可以捕获脱字符的位置,但是如果可以的话,您可以通过使用文本框的onblur事件捕获位置(与字符串有关)来避免Jason Cohen的担忧。

1

在你更新的光:

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

我觉得杰森·科恩是不正确。当焦点丢失时,插入位置将被保留。

[编辑:增加了对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。我不知道如何重新定位光标,使它停留在插入点。

+0

在FF 4中,这可以通过`elem.setSelectionRange(from,to)`完成,并使用'from'和'to'的相同值,您可以使用curpos var +插入字符串的长度,如下所示:` elem.setSelectionRange(curpos + newstring.length,curpos + newstring.length)`假设使用newstring而不是管道。 我不知道如何在IE中实现这一点,但...我没有在任何其他浏览器上测试过这个... – Flatline 2011-05-31 04:13:18

0

在前面的回答@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; 
}