Emoji Picker на JavaScript и jQuery для textarea и комментариев
- Показывать справа: 0
При разработке комментариев, CMS, редакторов новостей и интерактивных форм часто требуется быстрый и удобный emoji picker. Большинство готовых библиотек перегружены, медленно работают и создают лишнюю нагрузку на DOM.
В этом проекте реализован собственный lightweight emoji picker на JavaScript и jQuery с быстрым рендерингом, переключением между коротким и полным списком emoji, а также оптимизацией через HTML-кэширование.
Возможности emoji picker
- быстрый вывод emoji
- вставка emoji в textarea
- переключение полного списка
- оптимизация DOM
- HTML-кэширование
- работа через event delegation
- поддержка jQuery
- минимальная нагрузка на браузер
Пример HTML подключения
<div id="emoji-picker_0" class="emoji-picker"></div>
<div class="textarea__body">
<textarea></textarea>
</div>
Для интеграции данного lightweight emoji picker в вашу веб-страницу, вам потребуется добавить два основных HTML-элемента: контейнер для самого виджета выбора эмодзи и блок, содержащий поле ввода, куда будут вставляться выбранные символы.
-
<div id="emoji-picker_0" class="emoji-picker"></div>:
Этот
<div>выступает в роли места для рендеринга вашего emoji picker. JavaScript-код найдет этот элемент по его уникальномуid(в данном примере"emoji-picker_0") и динамически заполнит его содержимым — кнопками переключения и самими эмодзи.*
id="emoji-picker_0": Важно использовать уникальные идентификаторы, если вы планируете разместить несколько независимых emoji picker'ов на одной странице (например,"emoji-picker_1","emoji-picker_2"и т.д.). *class="emoji-picker": Класс, который может быть использован для применения стилей (CSS) к виджету и для его идентификации JavaScript'ом. -
<div class="textarea__body"><textarea></textarea></div>:
Этот блок содержит стандартное HTML-поле ввода
<textarea>. Именно сюда пользователь будет вставлять выбранные эмодзи.*
class="textarea__body": Этот класс может служить для стилизации родительского контейнера поля ввода или для помощи JavaScript в установлении связи между emoji picker'ом и соответствующим полем ввода.
Принцип работы: JavaScript-код, который вы найдете далее в статье, обнаруживает указанные <div> элементы, генерирует HTML для emoji picker'а и вставляет его в первый <div>. При клике на эмодзи, код определяет, к какому <textarea> относится данный picker (обычно по их взаимному расположению в DOM), и вставляет выбранный символ непосредственно в поле ввода.
Особенности реализации
В emoji picker используется:
- генерация HTML строкой
- innerHTML вместо append()
- кэширование готового HTML
- один глобальный обработчик событий
- быстрый рендер больших списков emoji
JavaScript код emoji picker
const emojiList = [
"🤦",
"🤷♀️", // Женщина, пожимающая плечами
"🤷♂️", // Мужчина, пожимающий плечами
"🤦♀️", // Женщина, хватающаяся за лоб
"✊","👊","🤜","🤛",
"🐷","🐖",
"🙈", "🤭","😂","❤️","😍","🤣","😊","🙏","😭","😘","👍","🥰",
"😁","😅","💖","🔥","😎","🤔","✨","🥳","🤗","😏",
"💔","🤩","🌹","😢","🎉","👑","🙌","💙","🤪","💜",
"🤤","🤓","👀","🤝","💪","🥺","🎂","🤭","🧡","💛",
"🖤","🌟","💯","🤞","🫂","👋","😇","🐶","🐱","🦄",
"🌈","⚡","💍","🚀","🍕","🍔","🍣","🍰","☕","🍺",
"🥂","🍾","🥤","🥑","🍓","🍉","🍎","🍊","🍋","🍍",
"🍌","🍒","🍑","🍇","🍖","🍗","🏆","⚽","🏀","🏈"
];
const emojiList_full = [
"😂", // Смех со слезами
"❤️", // Красное сердце
"😍", // Лицо с влюбленными глазами
"🤣", // Громкий смех
"😊", // Улыбающееся лицо с улыбкой
"🙏", // Сложенные руки (молитва/благодарность)
"😭", // Плачущее лицо
"😘", // Целующее лицо с закрытыми глазами
"👍", // Большой палец вверх
"🥰", // Лицо, окруженное сердечками
"😁", // Улыбающееся лицо с открытым ртом и глазами
"😅", // Улыбающееся лицо с каплей пота
"💖", // Мерцающее сердце
"🔥", // Огонь
"😎", // Улыбающееся лицо в солнцезащитных очках
"🤔", // Думающее лицо
"✨", // Искры
"🥳", // Праздничное лицо
"🤗", // Обнимающее лицо
"😏", // Ухмыляющееся лицо
"💔", // Разбитое сердце
"🤩", // Звездные глаза
"🌹", // Роза
"😢", // Грустное лицо
"🎉", // Хлопушка
"👑", // Корона
"🙌", // Поднятые руки
"💙", // Синее сердце
"🤪", // Ошалевшее лицо
"💜", // Фиолетовое сердце
"🤤", // Слюнявое лицо
"🤓", // Умное лицо
"👀", // Глаза
"🤝", // Рукопожатие
"💪", // Напряженный бицепс
"🥺", // Умоляющее лицо
"🎂", // Торт
"🤭", // Лицо, закрывающее рот рукой
"🧡", // Оранжевое сердце
"💛", // Желтое сердце
"🖤", // Черное сердце
"🌟", // Звезда
"💯", // Сто баллов
"🤞", // Перекрещенные пальцы
"🫂", // Люди, обнимающие друг друга
"👋", // Машущая рука
"😇", // Ангельское лицо
"🐶", // Собачья морда
"🐱", // Кошачья морда
"🦄", // Единорог
"🌈", // Радуга
"⚡", // Молния
"💍", // Кольцо
"🚀", // Ракета
"🍕", // Пицца
"🍔", // Гамбургер
"🍣", // Суши
"🍰", // Кусочек торта
"☕", // Горячий напиток
"🍺", // Пиво
"🥂", // Бокалы с шампанским
"🍾", // Бутылка шампанского
"🥤", // Стакан с трубочкой
"🥑", // Авокадо
"🍓", // Клубника
"🍉", // Арбуз
"🍎", // Красное яблоко
"🍊", // Мандарин
"🍋", // Лимон
"🍍", // Ананас
"🍌", // Банан
"🍒", // Вишня
"🍑", // Персик
"🍇", // Виноград
"🍖", // Кусок мяса
"🍗", // Ножка курицы
"🏆", // Трофей
"⚽", // Футбольный мяч
"🏀", // Баскетбольный мяч
"🏈", // Футбольный мяч (американский)
"🤷♀️", // Женщина, пожимающая плечами
"🤷♂️", // Мужчина, пожимающий плечами
"🤦♀️", // Женщина, хватающаяся за лоб
"🤦♂️", // Мужчина, хватающийся за лоб
"🤦", // Человек, хватающийся за лоб
"😬", // Гримасничающее лицо
"🤐", // Лицо с застежкой-молнией на рту
"😳", // Ошеломленное лицо
"😥", // Грустное, но облегченное лицо
"😰", // Холодный пот
"😩", // Усталое лицо
"😫", // Измученное лицо
"😵", // Ошеломленное лицо
"😮", // Открытый рот
"😯", // Удивленное лицо
"😲", // Изумленное лицо
"😴", // Спящее лицо
"😷", // Лицо в маске
"🤒", // Лицо с термометром
"🤕", // Лицо с повязкой
"🤢", // Тошнотворное лицо
"🤮", // Рвотное лицо
"🤯", // Взрывающаяся голова
"🧐", // Лицо с моноклем
"🙂", // Немного улыбающееся лицо
"😉", // Подмигивающее лицо
"😋", // Лицо, облизывающее рот
"😜", // Подмигивающее лицо с высунутым языком
"😝", // Язык
"🤨", // Лицо с поднятой бровью
"🥸", // Лицо в очках и шляпе
"🤠", // Ковбойская шляпа
"😈", // Дьявольское лицо
"👿", // Озлобленный демон
"🤡", // Клоун
"💩", // Куча какашек
"👻", // Призрак
"👽", // Инопланетянин
"🤖", // Робот
"😺", // Улыбающаяся кошка
"😸", // Смеющаяся кошка с открытыми глазами
"😹", // Плачущая от смеха кошка
"😻", // Кошка с влюбленными глазами
"😼", // Ухмыляющаяся кошка
"😽", // Целующая кошка
"🙀", // Изумленная кошка
"😿", // Грустная кошка
"😾", // Надутая кошка
"👎", // Большой палец вниз
"👏", // Хлопающие руки
"👐", // Открытые ладони
"🤲", // Поднятые руки ладонями вверх
"💪", // Напряженный бицепс (дублируется, убираем)
"☝️", // Указательный палец вверх
"✌️", // Знак победы
"🤟", // Люблю тебя
"🤘", // Рокерская рука
"🤙", // Позвони мне
"👈", // Указательный палец влево
"👉", // Указательный палец вправо
"👆", // Указательный палец вверх
"👇", // Указательный палец вниз
"✋", // Поднятая рука
"🤚", // Поднятая рука с раскрытой ладонью
"🖐️", // Рука с пятью пальцами
"🖖", // Приветствие вулканцев
"👌", // Окей
"🤌", // Щипок пальцами
"🤏", // Щипок
"🧠", // Мозг
"🦴", // Кость
"👅", // Язык
"💋", // Следы поцелуя
"🗣️", // Говорящая голова
"👤", // Человек
"👥", // Люди
"🐕", // Собака
"🐩", // Пудель
"🐺", // Волк
"🦊", // Лиса
"🦝", // Енот
"🐈", // Кошка
"🐈⬛", // Черная кошка
"🦁", // Лев
"🐯", // Тигр
"🐅", // Тигр (дублируется)
"🐆", // Леопард
"🐝", // Пчела
"🦋", // Бабочка
"🐌", // Улитка
"🐞", // Божья коровка
"🐜", // Муравей
"🕷️", // Паук
"🕸️", // Паутина
"🦂", // Скорпион
"🐢", // Черепаха
"🐍", // Змея
"🦎", // Ящерица
"🦖", // Тираннозавр рекс
"🦕", // Брахиозавр
"🐙", // Осьминог
"🦑", // Кальмар
"🐬", // Дельфин
"🐳", // Кит
"🐋", // Кит (дублируется)
"🦈", // Акула
"🦣", // Мамонт
"🦏", // Носорог
"🦛", // Бегемот
"🐁", // Мышь
"🐀", // Крыса
"🦨", // Скунс
"🦘", // Кенгуру
"🦡", // Барсук
"🐿️", // Белка
"🦔", // Еж
"🦇", // Летучая мышь
"🐔", // Курица
"🐓", // Петух
"🦃", // Индейка
"🦤", // Додо
"🦚", // Павлин
"🦢", // Лебедь
"🦩", // Фламинго
"🕊️", // Голубь
"🦅", // Орел
"🦆", // Утка
"🦉", // Сова
"🫖", // Чайник
"🍵", // Чашка чая
"🧋", // Жемчужный чай
"🍶", // Японский саке
"🍷", // Бокал вина
"🍸", // Коктейль
"🍹", // Тропический напиток
"🍻", // Кружки пива
"🥃", // Стакан виски
"🧊", // Лед
"🥄", // Ложка
"🍴", // Вилка и нож
"🍽️", // Тарелка и столовые приборы
"🥣", // Миска
"🍦", // Мороженое
"🍧", // Ледяная стружка
"🍨", // Десерт
"🍩", // Пончик
"🍪", // Печенье
"🧁", // Кекс
"🥧", // Пирог
"🍫", // Шоколадка
"🍬", // Конфета
"🍭", // Леденец
"🍮", // Пудинг
"🍯", // Мед
"🌰", // Каштан
"🥜", // Арахис
"🍏", // Зеленое яблоко
"🍐", // Груша
"🍈", // Дыня
"🥭", // Манго
"🥥", // Кокос
"🥝", // Киви
"🍅", // Помидор
"🫒", // Оливка
"🥦", // Брокколи
"🥬", // Листовой салат
"🥒", // Огурец
"🌶️", // Красный перец
"🌽", // Кукуруза
"🥕", // Морковь
"🧄", // Чеснок
"🧅", // Лук
"🥔", // Картофель
"🍠", // Бат
"🫘", // Фасоль
" उपास", // Грибы
"🍞", // Хлеб
"🥐", // Круассан
"🥖", // Багет
"🥨", // Крендель
"🥯", // Бублик
"🧇", // Вафля
"🥞", // Блины
"🍳", // Жареное яйцо
"🥚", // Яйцо
"🥘", // Паэлья
"🍲", // Горшок с едой
"🥗", // Салат
"🍿", // Попкорн
"🧈", // Масло
"🧂", // Соль
"🥫", // Консервная банка
"🍝", // Спагетти
"🍜", // Лапша
"🍢", // Шашлычок
"🍙", // Рисовый шарик
"🍚", // Миска с рисом
"🍘", // Рисовый крекер
"🥠", // Печенье с предсказанием
"🥮", // Лунный пирог
"🍡", // Сладкий шашлычок
"🥟", // Пельмени
"🍼", // Детская бутылочка
"🧸", // Плюшевый мишка
"🪅", // Пиньята
"🪆", // Матрешка
"🎁", // Подарок
"🎈", // Воздушный шарик
"🎏", // Флажок
"🎀", // Бант
"🎊", // Конфетти
"🎗️", // Ленточка
"🪢", // Узел
"🧵", // Нитки
"🧶", // Клубок пряжи
"🪡", // Иголка с ниткой
"💡", // Лампочка
"🔦", // Фонарик
"🪞", // Зеркало
"🪟", // Окно
"🛏️", // Кровать
"🛋️", // Диван
"🪑", // Стул
"🚽", // Туалет
"🛁", // Ванна
"🚿", // Душ
"🪒", // Бритва
"🧴", // Бутылочка
"🧷", // Булавка
"🧼", // Мыло
"🧽", // Губка
"🧹", // Метла
"🛒", // Корзина для покупок
"🪣", // Ведро
"📦", // Посылка
"🗄️", // Шкафчик
"🗃️", // Картотека
"🗂️", // Карточки
"🗞️", // Свернутая газета
"📰", // Газета
"🗒️", // Записная книжка
"🗓️", // Календарь
"📇", // Картотека (дублируется)
"📈", // Диаграмма роста
"📉", // Диаграмма падения
"📊", // Диаграмма
"🧮", // Абак
"🧾", // Квитанция
"💸", // Деньги падают
"💵", // Доллар
"💴", // Йена
"💶", // Евро
"💷", // Фунт
"🪙", // Монета
"💰", // Мешок денег
"💳", // Кредитная карта
"💎", // Алмаз
"⚖️", // Весы
"🦯", // Трость
"🦽", // Инвалидная коляска (ручная)
"🦼", // Инвалидная коляска (электрическая)
"🛺", // Авторикша
"🚑", // Скорая помощь
"🚒", // Пожарная машина
"🚓", // Полицейская машина
"🚕", // Такси
"🚖", // Компактное такси
"🚗", // Автомобиль
"🚙", // Внедорожник
"🚚", // Грузовик
"🚛", // Тягач
"🚜", // Трактор
"🏎️", // Гоночный автомобиль
"🏍️", // Мотоцикл
"🛵", // Скутер
"🚲", // Велосипед
"🛴", // Самокат
"🛹", // Скейтборд
"🛼", // Ролики
"🚏", // Автобусная остановка
"🛣️", // Шоссе
"🛤️", // Железнодорожные пути
"⛽", // АЗС
"🚨", // Аварийная сигнализация
"🚥", // Светофор
"🚦", // Светофор (пешеходный)
"🚧", // Строительство
"⚓", // Якорь
"⛵", // Парусник
"🛶", // Каноэ
"🚤", // Скоростная лодка
"🛳️", // Пассажирский лайнер
"⛴️", // Паром
"🚢", // Корабль
"🛥️", // Яхта
"🛩️", // Самолет
"✈️", // Самолет (дублируется)
"🛫", // Взлет самолета
"🛬", // Посадка самолета
"🚁", // Вертолет
"🪂", // Парашют
"🛰️", // Спутник
"💺", // Кресло самолета
"🚟", // Подвесная дорога
"🚠", // Канатная дорога
"🚡", // Воздушный трамвай
"🚃", // Вагон трамвая
"🚋", // Японский трамвай
"🚝", // Монорельс
"🚞", // Горный поезд
"🚂", // Паровоз
"🚆", // Поезд
"🚄", // Высокоскоростной поезд
"🚅", // Стрела
"🚊", // Трамвай
];
// кэшируем HTML
const emojiCache = {
short: null,
full: null
};
/* ---------- ГЕНЕРАЦИЯ HTML ---------- */
function buildEmojiHTML(list, isFull) {
const emojisHTML = list.map(e =>
`<span class="emoji" data-emoji="${e}">${e}</span>`
).join('');
const buttonHTML = `<button class="emoji-toggle" data-is-full="${isFull}">
${isFull ? '' : ''}
</button>`;
return emojisHTML + buttonHTML;
}
/* ---------- РЕНДЕР ---------- */
function fillEmojiPicker($emojipicker, list, isFull = false) {
let html;
if (isFull) {
if (!emojiCache.full) {
emojiCache.full = buildEmojiHTML(list, true);
}
html = emojiCache.full;
} else {
if (!emojiCache.short) {
emojiCache.short = buildEmojiHTML(list, false);
}
html = emojiCache.short;
}
// максимально быстрый способ
$emojipicker[0].innerHTML = html;
}
/* ---------- ВСТАВКА ---------- */
function insertText(txtarea, text) {
var oldScrollTop = txtarea.scrollTop;
var start = txtarea.selectionStart;
var end = txtarea.selectionEnd;
txtarea.value =
txtarea.value.substring(0, start) +
text +
txtarea.value.substring(end);
txtarea.scrollTop = oldScrollTop;
}
/* ---------- INIT ---------- */
jQuery(document).ready(function(){
if ($('#emoji-picker_0').length)
fillEmojiPicker($('#emoji-picker_0'), emojiList, false);
if ($('#emoji-picker_1').length)
fillEmojiPicker($('#emoji-picker_1'), emojiList, false);
document.addEventListener('click', function(event) {
// --- ПЕРЕКЛЮЧЕНИЕ ---
const toggleBtn = event.target.closest('.emoji-toggle');
if (toggleBtn) {
const picker = toggleBtn.closest('.emoji-picker');
const isFull = toggleBtn.getAttribute('data-is-full') === 'true';
if (isFull) {
fillEmojiPicker($(picker), emojiList, false);
} else {
fillEmojiPicker($(picker), emojiList_full, true);
}
return;
}
// --- ЭМОДЗИ ---
const emojiElement = event.target.closest('.emoji');
if (emojiElement) {
const emoji = emojiElement.dataset.emoji;
const textareaContainer = emojiElement.closest('.textarea__body');
if (textareaContainer) {
const textarea = textareaContainer.querySelector('textarea');
if (textarea) {
insertText(textarea, emoji);
}
}
}
});
});
Разработка JavaScript и frontend решений
Я занимаюсь разработкой:
- JavaScript модулей
- frontend компонентов
- AJAX интерфейсов
- CMS функционала
- кастомных textarea редакторов
- систем комментариев
- emoji picker и UI компонентов
- интерактивных web-приложений
Подробнее об услугах web-разработки:
Заказать разработку
Если вам требуется разработка JavaScript функционала, frontend компонентов, оптимизация jQuery скриптов или создание кастомного emoji picker под ваш проект — вы можете заказать разработку отдельного решения.