Блог / jQuery плагин для вставки смайлов в TEXTAREA

13 августа 2021

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

Плагин очень простой, но со своей задачей справляется на ура. Не буду толочь воду в ступе и сразу перейду к демонстрации его возможностей.

Demo #1:

Код:

<script type="text/javascript">
  $(document).ready(function() {
    $('textarea#demo1').litesmileys();
  });
</script>
<textarea id="demo1"></textarea>

Результат:

Demo #2:

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

Код:

<script type="text/javascript">
  $(document).ready(function() {
    $('textarea#demo2').litesmileys({
      'smileys': [
        ' :) ',
        ' :( ',
        ' :D ',
        '😃',
        '😄'
      ]
    });
  });
</script>
<textarea id="demo2"></textarea>

Результат:

Demo #3:

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

Код:

<style type="text/css">
  div[unselectable="on"] > span {
    display: block;
    margin: 0 0 6px 35px;
  }
  div[unselectable="on"]::before {
    content: "Быстрый ответ:";
    font-weight: bold;
  }
<style>
<script type="text/javascript">
  $(document).ready(function() {
    $('textarea#demo3').litesmileys({
      'smileys': [
        'Здравствуйте!',
        'С уважением.'
      ]
    });
  });
</script>
<textarea id="demo3"></textarea>

Результат:

Итоги

Доступный для скачивания архив с плагином вы найдёте в прикреплённых к статье файлах. Плагин, повторюсь, получился простой и надёжный. Буду рад если он поможет кому-нибудь немного оживить ленту комментариев на своём сайте 😊.