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

Я работаю над небольшой функцией смайликов.

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

текст такой: Немного текста здесь

Код:

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

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

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

Код (разметка): Как я могу сделать так, чтобы смайлик отображался в том месте, где я помещаю курсор?

Ваш код говорит ему поместить смайлик в конце, чтобы он делал то, что вы просите. Вместо этого вам нужно получить позицию курсора

 var cursorPosition = $('#myTextarea').prop("selectionStart");

Код (javascript): затем возьмите currentText.value, разделите его на 2 с помощью курсораPosition и соедините их вместе с эмодзи в середине.

В вашем первом примере используется «currentText.value += smileyWithPadding;». Это добавит только вставленный текст. Использовать это

 
<form>

<textarea id="currentText" cols="40" rows="3"></textarea>

<input type="button" onclick="insertSmiley('blah');" value="Insert" />
</form>

Код (JavaScript): и HTML

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

HTML: текст будет вставлен в место, где находится курсор.

Однако это НЕ заменит выделенный текст.

Для этого вам придется добавить пару дополнительных строк кода.

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

Стрелять.

Раньше я ждал ответа, а затем просто нашел решение jQuery:

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

Код (разметка): И кнопки отправки (значки) стали:

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

Код (разметка): Возможно, в какой-то момент я протестирую ваше решение NetStar, так как предпочел бы иметь его на чистом JavaScript.