javascript - 将文本插入选定的文本区域

Question

当我单击一个按钮时，我想在当前插入符号位置的当前选定文本区域中插入一些文本。我如何使用 jQuery 或仅使用 Javascript 来做到这一点？

我遇到了将文本插入特定文本区域的代码，但对于我的项目有多个文本区域。

Answer 1

这可以满足您的所有需求（旧浏览器支持除外）。

var myText = "sup?",
    lastActiveElement = null;

window.addEventListener("focusin", function(e) {
    lastActiveElement = e.target;
});

document.getElementById("go").addEventListener("click", function(e) {
    if(!lastActiveElement || lastActiveElement.tagName.toUpperCase() !== "TEXTAREA") {
        alert("no textarea selected");
        return;
    }
    var selectionStart = lastActiveElement.selectionStart,
        value = lastActiveElement.value;
    lastActiveElement.value = value.substr(0, selectionStart) + myText + value.substr(selectionStart);
});

演示：http: //jsfiddle.net/rfYZq/2/

该focusin事件将最后一个焦点元素存储到一个 var 中。

Answer 2

(function ($, undefined) {
    $.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);

基本上，要在文本框中使用它，请执行以下操作：

$("#myTextBoxSelector").getCursorPosition();

Answer 3

我从其他地方得到了这个脚本，但我找不到它的书签。

这为 jQuery 添加了一个方法，允许您执行以下操作：

$("#selectedTextarea").insertAtCaret(myText);

编辑：这里的工作小提琴

和代码：

jQuery.fn.extend({
insertAtCaret: function(myValue)
{
    return this.each(function()
    {
        if(document.selection)
        {
            //For browsers like Internet Explorer
            this.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            this.focus();
        }
        else if(this.selectionStart || this.selectionStart == '0')
        {
            //For browsers like Firefox and Webkit based
            var startPos = this.selectionStart;
            var endPos = this.selectionEnd;
            var scrollTop = this.scrollTop;
            this.value = this.value.substring(0, startPos) + myValue + this.value.substring(endPos, this.value.length);
            this.focus();
            this.selectionStart = startPos + myValue.length;
            this.selectionEnd = startPos + myValue.length;
            this.scrollTop = scrollTop;
        }
        else
        {
            this.value += myValue;
            this.focus();
        }
    })
}
});