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