jQuery Insert AT Cursor

Plugin to insert at cursor of text area

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="http://jasny.github.io/bootstrap/assets/css/bootstrap.css">
<script src="http://media.gigats.com/js/mediaJS/bootstrap.min.js"></script>
<textarea class="span4" rows="10" id="t1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis ullamcorper nulla. Suspendisse potenti. Phasellus aliquet laoreet enim a aliquam. Cras congue metus at elit viverra, vitae mollis lectus accumsan. Ut id risus non eros dignissim rhoncus quis quis purus. Suspendisse mattis hendrerit lorem, vitae malesuada dui eleifend ac. Nulla eu metus at lectus feugiat viverra a eu lorem. Pellentesque consectetur nisi a leo aliquam tempus. Aenean a velit non magna laoreet porta. Sed mattis ipsum eu eros iaculis, ac adipiscing orci egestas. Duis bibendum eros a arcu tincidunt, quis sagittis veli lao\</textarea>
<div class="clearfix"></div>
<div class="buttons">
    <button class="btn btn-success" value="hello">Hello</button>
    <button class="btn btn-success" value="bye">Bye</button>
    <button class="btn btn-success" value="look">Look</button>
</div>

JavaScript

//Put in external file

$.fn.insertAtCursor = function (myValue) {
    return this.each(function (i) {
        if (document.selection) {
            //For browsers like Internet Explorer
            this.focus();
            var 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();
        }
    });
}



$('div.buttons button').click(function () {
    $('#t1').insertAtCursor('@@' + $(this).val() + '@@');
});