Cursor position in textarea on insert

I am working on a little emoji function. My problem is when I have a text in the textarea and select an emoji from the drop down the emoji always goes to the end of the text even if I place the cursor at the beginning of the text, the emoji will go to the end of the text like so:

Some text here

The code:

function insertSmiley(smiley)
{
var currentText = document.getElementById("textarea");
var smileyWithPadding =" "+ smiley +" ";
currentText.value += smileyWithPadding;
currentText.focus();
}

Code (markup):

I tried to remove currentText.focus(); but it didn't help. I also tried to use jQuery to keep the textarea's focus but the emoji would still go to the end of the text:

$(window).load(function()
{
var lastFocus;
$("#dropdown-emojis").mousedown(function(e)
{
return false;
});
});

Code (markup):

How can I make the emoji to show at the place where I place the cursor?

 

Your first example uses "currentText.value += smileyWithPadding;". This will only append your inserted text.

Use this

function insertSmiley(smiley) {
    var el = document.getElementById("currentText");
    var smileyWithPadding = " " + smiley + " ";

    var val = el.value, endIndex, range, doc = el.ownerDocument;

    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number")
    {
        endIndex = el.selectionEnd;
        el.value = val.slice(0, endIndex) + smiley + val.slice(endIndex);
        el.selectionStart = el.selectionEnd = endIndex + smiley.length;
    }
    else if (doc.selection != "undefined" && doc.selection.createRange)
    {
        el.focus();
        range = doc.selection.createRange();
        range.collapse(false);
        range.text = smiley;
        range.select();
    }
}

Code (JavaScript):

and the html

<form>
    <textarea id="currentText" cols="40" rows="3"></textarea>
    <input type="button" onclick="insertSmiley('blah');" value="Insert" />
</form>

HTML:

This will insert the text where the cursor is... However, this will NOT replace selected text. You'll have to add a couple extra lines of code for that. I can't think of a logical reason why someone may want to override regular text with a smiley though so that decision of functionality is up to you.

 

Shoot. I waited for a reply earlier, then I just went ahead and found a jQuery solution:

$(window).load(function(){
$( 'input[type=button]' ).on('click', function(){
var cursorPos = $('#textarea').prop('selectionStart');
var v = $('#textarea').val();
var textBefore = v.substring(0, cursorPos );
var textAfter = v.substring( cursorPos, v.length );
$('#textarea').val( textBefore+ " " + $(this).val() + " " +textAfter );
});
});

Code (markup):

And the submit buttons (icons) became:

<input type="button" class="face_smile" value="&#128515;" onclick="$('#emoji_container').hide();">
etc.

Code (markup):

I may test your solution NetStar at some point, since I would prefer to have it in pure javascript.

 

Make sure it's cross browser capable... The example I gave actually does it 2 different ways for IE browsers and for all others...