Insert in text-area at current caret position

SO 18735372

by Tushar Gupta

HTML

<textarea id="test">Hello world</textarea>
<a>change</a>

JavaScript

(function ($) {
    $.fn.getCursorPosition = function () {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } else if (document.selection) {
            // IE
            input.focus();
            var sel = document.selection.createRange();
            var selLen = document.selection.createRange().text.length;
            sel.moveStart('character', -input.value.length);
            return sel.text.length - selLen;
        }
    }
})(jQuery);

$('a').click(function () {
    var htmlString = '<div class="football"></div>';
    var txt = $('#test').text();
    var cur_pos = $('#test').getCursorPosition();
    if (cur_pos != 0) {
        $('#test').val(txt.substring(0, cur_pos) + htmlString + txt.substring(cur_pos + 1));
    }else{
        $('#test').val(htmlString + txt);
    }
});