Question

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

我在堆栈溢出上得到了很多答案，包括下面的，

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并将其光标位置保存到隐藏字段中，这样当焦点移动到其他控件时，我将有隐藏字段来获取文本区域的光标位置。我稍后会在这里发布，同时如果有人有好主意那么请分享。

提前谢谢

Answer 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是我点击树节点时调用的主要函数。

如果有任何其他解决方案可用而非举办活动，请分享您的观点。

Answer 2

我建议在焦点丢失之前使用my jQuery plug-in for this和一些额外的东西来保存textarea的选择或光标位置。

我在之前的回答中已经涵盖了这个确切的案例：

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

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

2 个答案: