Question

这已经到了绝对沮丧的程度。我们正在尝试编写一些js，它们会在与textarea关联的文本中的特定位置插入文本。看起来它应该很简单，但到目前为止我们还没有想到它。

使我们的流程复杂化的是我们有一个浮动菜单，您可以从中选择要插入的内容。所以顺序是：

定位到textarea中所需的插入位置。使用调试器断点，visual studio调试器指示textarea对象将selectionStart和selectionEnd定义为具有正确值的数字。如果在那个休息时间，你试着编写访问selectionStart和selectionEnd的js你得到未定义的（这没有意义，但这里有很多帖子说其他人都有同样的问题）
现在我们定位到浮动菜单，它只是一个表上的div包装器，其中td元素调用一个函数来插入文本）。如果我们完全点击td元素，文本将被插入它所属的位置。如果在任何时候我们点击td元素外面但在菜单内部，文档选择会重置到文本区域的开头，我们会在错误的位置插入。
我们尝试捕获与菜单相关联的onclick事件链，并且没有任何明显的情况会导致文档选择发生变化，但它确实会发生变化。
我们已经尝试了各种变通方法，我们在textarea本身上放置onClick并记住textarea的当前范围，但总是在缓冲区的前面。

所以用简单的术语来说：为什么createTextRange和文档选择不合理地表现在ie上，以及解决方法是什么？

jquery做了什么解决了这个问题，因为关于这个帖子的最常见答案似乎是使用jquery。

Answer 1

这是一个将插入插入符号的方法。

function insertAtCaret ( areaId, text ) {
    var txtarea = document.getElementById(areaId),
        scrollPos = txtarea.scrollTop,
        strPos = 0,
        range, front, back,
        br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
        "ff" : (document.selection ? "ie" : false ) );
    if (br == "ie") { 
        txtarea.focus();
        range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    front = (txtarea.value).substring(0,strPos);  
    back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        txtarea.focus();
        range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
};

我最初是在SO的答案中得到的。

为什么textarea.selectionStart没有工作呢？

1 个答案: