Bug w IE8使用Javascript在插入符号处插入文本

专注于IE，我有一个文本框（单行

），需要在插入符号/光标所在的位置插入文本。双击div时，div中的文本将插入插入插入符号位置

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

下面的代码使用多行输入（没有bug）可以正常工作，bug只出现在单行输入中

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

为了让所有的东西都摆在你面前，下面是调用

$.fn.insertcaret

的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());
});

如您所见，当两个

中的一个被单击、聚焦等时，一个隐藏字段（

ID=“InsertaRetfor”

）值被设置为

“主题”

或

“注释”

。双击标记时，其

.text（）

插入隐藏字段值指定的

内的插入符号位置

以下是字段：

<%=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>

主题：
评论：

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

---

我使用的是从谷歌搜索中找到的另一种InsertaCart代码。在单输入和文本区域工作很好

 $.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中也遇到了同样的问题。似乎对于输入

type=“text”

，它不填写

选择开始

和

选择结束

IE9确实如此。

谢谢jfar，但当浏览器的设置重置为默认设置时，IE8中仍然存在此问题。我将我的代码改为您使用的代码，因为它更具可读性。@BueKoW-这太糟糕了，我使用的代码与您的代码几乎完全相同，只是我使用了单击输入而不是div。我不知道除了选择器错误什么的。它一定是IE8特有的东西，我无法理解。如果我为IE安装谷歌Chrome框架，一切正常。这个问题在IE9中并不存在。我还没有在IE7中测试过这个。。。我可以将div更改为kicks的输入。

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