在光标位置将文本插入文本区域时出现 IE 问题

Posted 2023-05-07

【中文标题】在光标位置将文本插入文本区域时出现 IE 问题

【英文标题】：Issue with IE when Inserting text into text area at cursor position

【发布时间】：2012-10-27 13:40:33

【问题描述】：

我有一个场景，我需要将光标放在文本区域，然后单击同一页面上的树视图节点，以将节点的文本选择到我在单击树节点之前放置光标的文本区域。

我得到了很多关于堆栈溢出的答案，包括以下，

Inserting text in textarea at cursor position if cursor placed else text should append at last in IE

Inserting text after cursor position in text areа

Insert text into textarea with jQuery

How to insert text at the current caret position in a textarea

Inserting text at cursor in a textarea, with javascript

How do I insert some text where the cursor is?

FF 和 Chrome 在上述解决方案中运行良好，但如果焦点移动到其他控件，IE 8 或更低版本会失败（未检查 IE9）。

几乎所有帖子中都有以下或类似的 IE 实现：

(function ($) 
    $.fn.getCursorPosition = function () 
        var el = $(this).get(0);
        var pos = 0;
        if ('selectionStart' in el) 
            pos = el.selectionStart;
         else if ('selection' in document) 
            el.focus();
            var Sel = document.selection.createRange();
            var SelLength = document.selection.createRange().text.length;
            Sel.moveStart('character', -el.value.length);
            pos = Sel.text.length - SelLength
        
        return pos;
    
)(jQuery);

注意：我们也可以使用if(el.selectionStart || el.selectionStart == '0') 代替if ('selectionStart' in el) 和if(document.selection) 代替if ('selection' in document)

但是当焦点首先移动到其他控件然后执行它时，这将失败。在我的情况下，当用户遍历节点时，焦点将移动到树节点。

这种情况有什么解决方案吗？

我正在考虑在文本区域上编写 onkeyup 和 onclick 并将其光标位置保存到隐藏字段中，因此当焦点移动到其他控件时，我将有隐藏字段来获取文本区域的光标位置。我稍后会在这里发布，同时如果有人有什么好主意，请分享。

提前谢谢你

【参考方案1】：

正如我上面提到的，我有下面的代码让它在 IE 中也能工作， （也考虑过只使用 onblur 而不是这两个事件，但是当执行进入我的代码以设置隐藏变量时，它没有工作，因为焦点已经丢失）

下面的实现它在我的情况下工作正常。

if ($("#myTextArea").get(0).selectionStart == undefined) 
    $("#myTextArea").click(function (e) 
        $("#hdnTextAreaPosition").val($("#myTextArea").getCursorPosition());
    );
    $("#myTextArea").keyup(function (e) 
        $("#hdnTextAreaPosition").val($("#myTextArea").getCursorPosition());
    );

以上事件（keyup 和 click）在全局脚本中，只有在未定义 selectStart 的情况下才会附加

function getTextAreaCursorPosition() 
    if ($("#myTextArea").get(0).selectionStart == undefined) 
        return $("#hdnTextAreaPosition").val();
    
    else 
        return $("#myTextArea").getCursorPosition();
    



function insertToMyTextArea(textToInsert) 
    $("#myTextArea").focus();
    var cursorPosition = getTextAreaCursorPosition();
    var myContent = $("#myTextArea").val();
    $("#myTextArea").val(myContent.substring(0, cursorPosition) + textToInsert + myContent.substring(cursorPosition));

insertToMyTextArea 是我在点击树节点时调用的主要函数。

如果有任何替代解决方案可用而不是举办活动，请分享您的观点。

【讨论】：

我使用.on('focusout',...) （或者.focusout()，同理）保存选择位置，在失去焦点之前调用。事件也会冒泡，因此您也可以在父元素中捕获它（模糊不会冒泡）。

【参考方案2】：

我建议将my jQuery plug-in for this 与一些额外的东西结合使用，以在失去焦点之前保存文本区域的选择或光标位置。

我在之前的回答中已经介绍了这个确切的情况：

https://***.com/a/5890708/96100