如何使用javascript在插入符号中插入字符？
[英]How do I insert a character at the caret with javascript?
问题描述
I want to insert some special characters at the caret inside textboxes using javascript on a button. 
我想在按钮上使用javascript在文本框内的插入符号中插入一些特殊字符。 How can this be done? 如何才能做到这一点？
The script needs to find the active textbox and insert the character at the caret in that textbox. 该脚本需要找到活动文本框并将该字符插入该文本框中的插入符号。 The script also needs to work in IE and Firefox. 该脚本还需要在IE和Firefox中工作。
EDIT: It is also ok to insert the character "last" in the previously active textbox. 编辑：也可以在之前的活动文本框中插入字符“last”。
6 个解决方案
解决方案1
4 2008-09-12 05:36:12
I think Jason Cohen is incorrect. 我认为Jason Cohen是不正确的。 The caret position is preserved when focus is lost. 焦点丢失时保留插入位置。
[ Edit : Added code for FireFox that I didn't have originally.] [ 编辑 ：添加了我原本没有的FireFox代码。]
[ 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. 首先，您可以使用每个文本框的onBlur事件将变量设置为“this”，以便您始终知道最新的活动文本框。
Then, there's an IE way to get the cursor position that also works in Opera, and an easier way in Firefox. 然后，有一种IE方式可以获得光标位置，这种方式也适用于Opera，在Firefox中更容易。
In IE the basic concept is to use the document.selection object and put some text into the selection. 在IE中，基本概念是使用document.selection对象并将一些文本放入选择中。 Then, using indexOf, you can get the position of the text you added. 然后，使用indexOf，您可以获取您添加的文本的位置。
In FireFox, there's a method called selectionStart that will give you the cursor position. 在FireFox中，有一个名为selectionStart的方法，它将为您提供光标位置。
Once you have the cursor position, you overwrite the whole text.value with 有光标位置后，用。覆盖整个text.value
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. 以下是IE和FireFox的单独链接示例。 You can use you favorite browser detection method to figure out which code to run. 您可以使用自己喜欢的浏览器检测方法来确定要运行的代码。
<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>
This will also work with textareas. 这也适用于textareas。 I don't know how to reposition the cursor so it stays at the insertion point. 我不知道如何重新定位光标使其保持在插入点。
解决方案2
1 2008-09-10 14:51:55
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';
}
解决方案3
0 2013-01-18 15:12:05
A butchered version of @bmb code in previous answer works well to reposition the cursor at end of inserted characters too: 上一个答案中的@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;
}
解决方案4
0 2008-09-10 14:18:34
请注意，如果用户按下按钮，焦点文本框将丢失，并且没有插入位置！
解决方案5
0 2008-09-10 14:19:10
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'; myTextArea.value ='要插入文本区域的文本到此处';
解决方案6
0 2008-09-10 14:20:20
我不确定你是否可以捕捉插入位置，但如果可以，你可以通过使用文本框的onblur事件捕获位置（与字符串相关）来避免Jason Cohen的担忧。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.