javascript - Big w IE8 使用 Javascript 在插入符处插入文本

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"或 "Comment" .当 tag 被双击时，它的 .text()插入到 <input/> 中的插入符号位置由隐藏字段的值指定。

字段如下:

<%=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", new Dictionary<string,object> { {"rows","10"}, {"cols","50"}, { "class", "required"} })%>
</div>

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

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

Answer 1

我使用的是通过谷歌搜索发现的不同的 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 语句看起来很危险!