Положение курсора в текстовой области при клике

Question

Я работаю над маленькой функцией эмодзи.Моя проблема в том, что когда у меня есть текст в текстовой области, и я выбираю смайлик из выпадающего меню, он всегда идет в конец текста, даже если я помещаю курсор в начало текста, смайлик переходит в конец текста.текст вроде так:

Здесь немного текста ?

Код:

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

Я пытался удалить currentText.focus();, но это не помогло.Я также пытался использовать jQuery, чтобы сохранить фокусировку текстовой области, но эмодзи все равно доходило бы до конца текста:

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

Как я могу сделать эмодзи так, чтобы оно показывалось в том месте, где я помещаю курсор?

Answer 1

используйте .selectionStart и .selectionEnd, чтобы узнать, где находится курсор.

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