如何使用javascript在插入符号中插入字符？ [英] How do I insert a character at the caret with javascript?
问题描述
我想在按钮上使用javascript在文本框内的插入符号中插入一些特殊字符。如何做到这一点？
I want to insert some special characters at the caret inside textboxes using javascript on a button. How can this be done?
脚本需要找到活动文本框并在该文本框中的插入符号处插入字符。该脚本还需要在IE和Firefox中工作。
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.
编辑：也可以在之前的活动中插入last字符文本框。
It is also ok to insert the character "last" in the previously active textbox.
推荐答案
我认为Jason Cohen是不正确的。焦点丢失时保留插入位置。
I think Jason Cohen is incorrect. The caret position is preserved when focus is lost.
[编辑：添加了我原本没有的FireFox代码。]
[Edit: Added code for FireFox that I didn't have originally.]
[修改：添加了代码以确定最近的有效文本框。]
[Edit: Added code to determine the most recent active text box.]
首先，您可以使用每个文本框的onBlur事件将变量设置为this，以便您始终知道最新的活动文本框。
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.
然后，有一个IE方式获得在Opera中也可以使用的光标位置，以及在Firefox中更简单的方法。
Then, there's an IE way to get the cursor position that also works in Opera, and an easier way in Firefox.
在IE中，基本概念是使用document.selection对象和将一些文本放入选择中。然后，使用indexOf，你可以获得你添加的文本的位置。
In IE the basic concept is to use the document.selection object and put some text into the selection. Then, using indexOf, you can get the position of the text you added.
在FireFox中，有一个名为selectionStart的方法，它将为你提供光标位置。
In FireFox, there's a method called selectionStart that will give you the cursor position.
获得光标位置后，在光标位置+文本前用
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
这是一个带有IE和FireFox单独链接的例子。您可以使用自己喜欢的浏览器检测方法来确定要运行的代码。
Here is an example with separate links for IE and 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>
这也适用于textareas。我不知道如何重新定位光标使其保持在插入点。
This will also work with textareas. I don't know how to reposition the cursor so it stays at the insertion point.
这篇关于如何使用javascript在插入符号中插入字符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
