Добавление смайликов (emoji) в поля форм

Пример работы - многострочное поле на стенде.

Для возможности вставлять смайлики необходимо у элемента input или textarea добавить класс as-smile.

В форме для поля мы можем указать дополнительный класс в GetItem в SELECT 1: 

-- SELECT 1 in GetItem
select '' f1, 'as-smile' class_f1 
from t1

Данные сохраняются в юникоде. 

Кнопка вызова смайлов имеет класс emoji-btn, сам контейнер со смайлами - emoji-cont.

Вы можете подвинуть кнопку показа смайлов через CSS. 

.emoji-btn {
    position: absolute;
    right: 46px;
    z-index:4;
}

Настройки смайлов в as.systemOptions.js: 

  1. smile.enableCommentSmile - если true, то смайлы будут работать в Комментариях. По умолчанию false.
  2. smile.enableChatSmile - если true, то смайлы будут работать в Чатах.  По умолчанию false.
  3. smile.button - смайлик, который выводится на кнопке показа смайлов. По умолчанию '😄'
  4. smile.fontSize - размер смайлов. По умолчанию '20px'
  5. smile.items - массив доступных смайлов. По умолчанию: 
['😀', '😁', '😂', '😃', '😄', '😅', '😆', '😇', '😈',
                '😉', '😊', '😋', '😌', '😍', '😎', '😏', '😐', '😑',
                '😒', '😓', '😔', '😕', '😖', '😗', '😘', '😙', '😚',
                '😛', '😜', '😝', '😞', '😟', '😠', '😡', '😢', '😣',
                '😤', '😥', '😦', '😧', '😨', '😩', '😪', '😫', '😬',
                '😭', '😮', '😯', '😰', '😱', '😲', '😳', '😴', '😵',
                '😶', '😷', '😸', '😹', '😺', '😻', '😼', '😽', '😾', '😿',
                '🙀', '💩', '☠', '👌', '👍', '👎', '🙈', '🙉', '🙊']



Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK