Question

专注于IE ，我有一个文本框（单行<input/>），我需要在插入/光标所在的位置插入文本。双击div时，div中的文本将插入插入符号位置。

错误：文本已插入文本框，但位于文本框中字符串的开头，而不是插入位置的位置。

以下代码使用多行输入正常工作（无错误），只有单行输入才会出现错误。

以下是IE 的简单Javascript（为简单起见，其他浏览器支持已被删除）：

$.fn.insertAtCaret = function (tagName) {
    return this.each(function () {
        if (this.selectionStart || this.selectionStart == '0') {
            //MOZILLA support
        } else if (document.selection) {
            //IE support
            this.focus();
            sel = document.selection.createRange();
            sel.text = tagName;
        } else {
            //ELSE
        }
    });
};

只是让你面前的一切，这里是调用$.fn.insertAtCaret 的JQuery：

$("#Subject").mousedown(function () { $("#InsertAtCaretFor").val("Subject"); });
$("#Subject").bind('click, focus, keyup', function () { $("#InsertAtCaretFor").val("Subject"); });

$("#Comment").mousedown(function () { $("#InsertAtCaretFor").val("Comment"); });
$("#Comment").bind('click, focus, keyup', function () { $("#InsertAtCaretFor").val("Comment"); });

$(".tag").dblclick(function () {
    if ($("#InsertAtCaretFor").val() == "Comment") $("#Comment").insertAtCaret($(this).text());
    if ($("#InsertAtCaretFor").val() == "Subject") $("#Subject").insertAtCaret($(this).text());
});

如您所见，当点击，关注等两个<input/>中的一个时，隐藏字段（ID="InsertAtCaretFor"）值设置为"Subject"或{{ 1}}。双击标记时，其"Comment"将插入隐藏字段值指定的.text()内的插入符号位置。

以下是字段：

<input/>

最后，这是一张图片，以便您可以直观地了解我在做什么：

http://www.danielmckenzie.net/ie8bug.png

bug behavior

Answer 1

我正在使用google搜索到的不同insertAtCaret代码。适用于单个输入和textareas就好了。

 $.fn.extend({
 insertAtCaret: function (myValue) {
    var $input;
    if (typeof this[0].name != 'undefined')
        $input = this[0];
    else
        $input = this;

    if ($.browser.msie) {
        $input.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
        $input.focus();
    }
    else if ($.browser.mozilla || $.browser.webkit) {
        var startPos = $input.selectionStart;
        var endPos = $input.selectionEnd;
        var scrollTop = $input.scrollTop;
        $input.value = $input.value.substring(0, startPos) + myValue + $input.value.substring(endPos, $input.value.length);
        $input.focus();
        $input.selectionStart = startPos + myValue.length;
        $input.selectionEnd = startPos + myValue.length;
        $input.scrollTop = scrollTop;
    } else {
        $input.value += myValue;
        $input.focus();
    }
}
});

在查看你的js代码之后我会改变：

$(".tag").dblclick(function () {
 if ($("#InsertAtCaretFor").val() == "Comment")     $("#Comment").insertAtCaret($(this).text());
if ($("#InsertAtCaretFor").val() == "Subject")     $("#Subject").insertAtCaret($(this).text());
});

以下内容：

$(".tag").dblclick(function () {
     if ($("#InsertAtCaretFor").val() == "Comment") {    
           $("#Comment").insertAtCaret($(this).text());
     }
     if ($("#InsertAtCaretFor").val() == "Subject") {                  
           $("#Subject").insertAtCaret($(this).text());
     }
});

那两个没有结束花括号的内联if语句看起来很危险！

Answer 2

我自己在IE8中遇到了同样的问题。对于 INPUT type="text"，它似乎不会填充selectionStart和selectionEnd。 IE9 但确实如此。

大w IE8使用Javascript在Caret插入文本

2 个答案: