单击时文本区域中的光标位置

Question

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

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

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

Answer 1

use .selectionStart and .selectionEnd to know where the cursor is.

var startPosition = myElement.selectionStart;
    var endPosition = myElement.selectionEnd;
    if(startPosition == endPosition){ 
        newString= currentText.value.substring(0,startPosition)+ " " + smiley + " " + currentText.value.subString(endPosition,currentText.value.lenght());