Append HTML to text-area while keeping the existing text-area content, and appending to where the cursor is?

Question

The question sounds long but I am looking for a real simple basic solution.

HTML:

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

                  <a>change</a>

jQuery:

    $('a').click(function() {

        var htmlString = '<div class="football"></div>'
        var existing = jQuery('#test').text()

        $('#test').append().text(existing + htmlString).html();

    });

This appends the existing text with my htmlString variable, for one is this how I should add htmlString into the text-area while keeping the existing content, or is there a better way?

Also its important to me to append htmlString where the cursor is, it makes more sense in my live code, but you should get the idea, this kind of defeats my code above stringing both of those variables like that. So I am open to some ideas :)

Here is a fiddle for you to get a better visual of what that code does FIDDLE

This looks like a good read http://stackoverflow.com/questions/946534/insert-text-into-textarea-with-jquery/946556#946556 I am still open to feedback here and answers of course... — Michael Joseph Aubry, Sep 11 '13 at 07:47
I suggest to use .val() instead of html() when dealing for form elements... Also this is what you are looking for http://stackoverflow.com/questions/263743/how-to-get-caret-position-in-textarea — Salketer, Sep 11 '13 at 07:48
Thanks I appreciate the reply taking a look now... yeah I updated the fiddle http://jsfiddle.net/nQErc/233/ — Michael Joseph Aubry, Sep 11 '13 at 07:51

Tushar Gupta - curioustushar · Accepted Answer · 2013-09-11T08:52:24.143

3

Updated Demo

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

edited Sep 11 '13 at 08:52

answered Sep 11 '13 at 07:52

Tushar Gupta - curioustushar

58,085
24
103
107

1

Holy Smokes batman this is great... just quickly looked at the fiddle and this looks right on the money, glad you came across my question.. I was just looking up selectionStart and examples for it. Looks like I got a great example here :) – Michael Joseph Aubry Sep 11 '13 at 07:56
Is this IE compatible I read selectionStart doesn't work well with IE, Ill test it myself here in a minuet if not, that's fine there is a workaround in this post I am reading :) – Michael Joseph Aubry Sep 11 '13 at 07:57
Ok thanks, one more thing I need to analyze myself, but while I have you here, any idea why when inserting the `htmlString` it removes a space in front if it? Ex. Hello world if my cursor is next the the H.. kinda like this |Hello world, when the string is inserted it erases the H... – Michael Joseph Aubry Sep 11 '13 at 08:06
1

@MichaelJosephAubry check updated version http://jsfiddle.net/cse_tushar/F5tB8/1/ – Tushar Gupta - curioustushar Sep 11 '13 at 08:14

Append HTML to text-area while keeping the existing text-area content, and appending to where the cursor is?

1 Answers1