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

Question

When I click a button I want to insert some text into the currently selected textarea at the current caret position. How do I do this with jQuery or just Javascript?

I've come a across code that inserts text into a specific text area but for my project there are multiple textareas.

Answer 1

This does all what you want (except old browser support).

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

Demo: http://jsfiddle.net/rfYZq/2/

The focusin event stores the last focused element into a 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);

Basically, to use it on a text box, do the following:

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

Answer 3

I got this script from somewhere else but I can't find the bookmark for it.

This adds a method to jQuery that will allow you to do the following:

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

Edit: a working fiddle here

And the code:

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