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

samoylov

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

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

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

Код:

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

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

snuf

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

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

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

mrosd

В вашем первом примере используется «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: текст будет вставлен в место, где находится курсор.

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

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

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

SkyAngels

Стрелять.

Раньше я ждал ответа, а затем просто нашел решение 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.

Похожие темы	Дата
Курс по Angular.JS - Кантор (2016)	19.10.2024, 18:10
[Владилен Минин] Angular 9. Теория и Практика 2020. Все включено + Бонусы (2020)	19.10.2024, 18:10
[WebForMySelf] FullStack-Мастер. Разработка CRM-системы на Node.js, Express, Angular6	19.10.2024, 18:10
Beginners Quick Start to Learn React.js by Sandeep Mewara	19.10.2024, 18:10
Как разместить на Картах Google 3 маркера с пользовательским вводом вместо 1?	19.10.2024, 18:10
Налоги в зависимости от государства	19.10.2024, 18:10
Как преобразовать тексты li в ссылки в javascript случайным образом?	19.10.2024, 18:10
Что вы автоматизировали в своих процессах электронной коммерции?	19.10.2024, 18:10
Я не смог найти похожего	19.10.2024, 18:10
Эксперты по JavaScript, нужна помощь!	19.10.2024, 18:10

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

samoylov

snuf

mrosd

SkyAngels

I AM

Интересно