@buzzloud
very beginner developer

Смайлы — с чего начинать?

Привет всем. Такой вопрос: есть pop-up окно - реализовано через fancybox, внутри этого окна есть поле для отправки сообщения и в этом поле есть иконка при наведении на которую у нас появляется блок со смайлами и, соответственно, при клике смайлик добавляется в поле сообщения. Вот так это должно быть: 624d44e1628342ecad45b9e5343cc845.jpg

Подскажите плиз, как можно реализовать это? Плагин есть какой или руками (как)? Буду признателен за совет :) Заранее спасибо!
  • Вопрос задан
  • 274 просмотра
Пригласить эксперта
Ответы на вопрос 3
Umr001
@Umr001
php
Самый примитивный способ это вставлять жаваскриптом Img с соответствующим src по клик на смайле. src можно прописать в дата аттрибтах смайлов например
Ответ написан
Комментировать
bootd
@bootd Куратор тега CSS
Гугли и ты откроешь врата знаний!
Никаких плагинов. Поле ввода делается обычным тегом div с атрибутом contenteditable="true", что бы в него можно было писать текст с клавиатуры, а так же видеть вставленные в него картинки!

Выглядит так:
<div class="fieldMessage" contenteditable="true"></div>


При клике на смайлик добавлять его в это поле.

Выглядит так:
$('.smile').on('click', function(){
// Предпологается, что .smile - это картинка
$('.fieldMessage').append($(this));
});


Написано конечно на коленке, для демонстрации логики, но это поверхностное видение, как и что у вас сделано мне не ясно!

При отправке:
Если вы отправляете форму через ajax - то достаточно просто получить содержимое div'a в виде строки и отправить на сервер.

Если форма отправляется как по умолчанию, с обновлением страницы, то вам нужно создать скрытое поле в форме и туда дублировать всё написанное в этот div, тоже в виде строки
Ответ написан
@buzzloud Автор вопроса
very beginner developer
Всем спасибо за советы.
Все-таки воспользовался плагином, протестил, вроде полностью закрыл свой вопрос.
Может кому пригодится)
https://github.com/mervick/emojionearea
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы