IE8使用Javascript在插入符号中插入文本的错误

问题描述

|| 专注于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,function () { $(\"#InsertAtCaretFor\").val(\"Comment\"); });

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

如您所见，当单击，聚焦等两个“ 0”之一时，隐藏字段（“ 5”）值将设置为“ 6”或“ 7”。双击标签时，将其“ 8”插入到隐藏字段值指定的“ 0”内的插入符号位置。 这些是字段：

<%=Html.Hidden(\"InsertAtCaretFor\") %>
<div class=\"form_row\">
    <label for=\"Subject\" class=\"forField\">
        Subject:</label>
    <%= Html.TextBox(\"Subject\",\"\",new Dictionary<string,object> { { \"class\",\"required no-auto-validation\" },{ \"style\",\"width:170px;\" },{ \"maxlength\",\"200\" } })%>
</div>
<div class=\"form_row\">
    <label for=\"Comment\" class=\"forField\">
        Comment:</label>
    <%= Html.TextArea(\"Comment\",object> { {\"rows\",\"10\"},{\"cols\",\"50\"},{ \"class\",\"required\"} })%>
</div>

最后，这是一张图片，您可以从视觉上了解我在做什么： http://www.danielmckenzie.net/ie8bug.png     

解决方法

我使用的是通过谷歌搜索发现的不同的insertAtCaret代码。仅适用于单个输入和文本区域。

 $.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语句看起来很危险！     ,我自己在IE8中遇到了同样的问题。对于INPUT

type=\"text\"

，似乎没有填写

selectionStart

和

selectionEnd

。 IE9可以。