Как добавить смайл в поле ввода

Question

        <a href="">&#128512;</a>
        <a href="">&#128517;</a>
        <a href="">&#128554;</a>
        <a href="">&#129397;</a>
        <form name="form1" method="post" action="">
            <input type="text" name="textfield">
        </form>

Как реализовать работу так, чтоб при клике на ссылку(смайл), у меня он добавлялся в поле ввода (input). Если можно как то лучше реализовать, то буду рад идеям!

Answer 1

вот более-менее универсальный код:

для каждого смайлика я добавил свой атрибут my-data-smile в котором содержится код для смайлика

событие нажатия мышки повешено на все окно, чтобы отслеживать нажатие на нужные смайлики (по имени класса)

а дальше берем значение атрибута и вставляем в поле

window.addEventListener('click', function(event){
  if (event.target.classList.contains('smile'))
  {
    let edit = document.querySelector('.edit');
    edit.value += event.target.attributes['my-data-smile'].value;
  }
});

.smile {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  cursor: pointer;
}

<div class = 'smile' my-data-smile = '&#128512;'>&#128512;</div>
<div class = 'smile' my-data-smile = '&#128517;'>&#128517;</div>
<div class = 'smile' my-data-smile = '&#128554;'>&#128554;</div>
<div class = 'smile' my-data-smile = '&#129397;'>&#129397;</div>

<form name="form1" method="post" action="">
  <input type="text" name="textfield" class = 'edit'>
</form>

P.S.

я только сделал добавление в конец текста, а по хорошему надо сделать добавление на место курсора (если он стоит) - это уж автор сам доделай

БЛОГ НА HUSL

Как добавить смайл в поле ввода

Ответы (1 шт):