Добавляем эмоций в текстовую область формы

Добавляем эмоций в текстовую область формы

От автора: в этом небольшом уроке мы реализуем возможность добавления смайлов в текстовую область формы средствами библиотеки jQuery. Полагаю, Вы уже пользовались такой возможностью неоднократно. В частности, используется она при добавлении поста на форуме, в комментариях, гостевой книге. Обычно рядом с текстовой областью, где пишется текст комментария, располагается блок со смайлами. Кликая на понравившемся смайле, мы добавляем его к нашему тексту. Думаю, идея понятна.

скачать исходникискачать урок

Прежде всего, нам потребуется минимальная разметка:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Теперь добавим немного оформления:

Теперь немного рутины — необходимо добавить имеющиеся у нас смайлы в блок, отведенный для них. Все смайлы находятся в папке img:

Отлично! Смайлы расположились в отведенном для них блоке. Теперь подключим библиотеку jQuery и начнем писать несложный клиентский код:

В чем заключается идея нашей дальнейшей работы? Если Вы обратили внимание, то каждая картинка смайла имеет свое уникальное значение атрибута alt — назовем его символьным представлением смайла. Картинка, соответственно, будет его графическим представлением.

Итак, идея заключается в том, чтобы при клике по смайлу получить значение его атрибута alt и добавить полученное символьное представление в текстовую область. Получим значение атрибута alt в переменную smile:

Перед тем, как добавить полученное значение в текстовую область, необходимо получить значение текстовой области, т.е. получить возможное ее содержание. Получим его в переменную text:

Ну и добавим смайл, изменяя значение текстовой области на новое — текст, который там был (или не был) плюс символьное представление смайла:

Отлично! Теперь при клике по смайлу он добавляется в текстовую область. Если до этого там был текст, то смайл добавляется после него. Осталось исправить некоторые недочеты. Мы привыкли, что перед вставляемым смайлом обязательно должен быть пробел, отделяющий смайл от текста. Добавим эти пробелы:

Однако пользователь сам может поставить пробел после текста. Теперь, если он кликнет по смайлу, то появится лишний пробельный символ между текстом и смайлом. Исправим это, обрезая концевые пробелы при получении значения текста:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Ну и вернем фокус в поле после добавления смайла, чтобы можно было сразу продолжать писать текст:

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

Для указанных целей создадим базу данных с одной таблицей. В таблице создадим 2 поля — первое поле будет счетчиком сообщений (id типа INT, имеющее атрибут Первичного ключа, автоинкрементируемое), второе будет хранить текст сообщений (тип TEXT).

Соединимся с БД:

Теперь реализуем добавление сообщений в БД:

И, наконец, получение сообщений:

Все сообщения получены в массив $posts. Выведем сообщения из массива в нужном месте, к примеру, сразу после формы:

Отлично, сообщения выводятся. Пока что в них выводится символьное представление смайлов. Напишем функцию, которая бы заменяла в выводимом тексте символьное представление графическим:

Здесь все просто — функция возвращает результат работы штатной функции str_replace(), которая, в свою очередь, ищет в строке $var вхождения подстроки из массива $symbol и меняет эти вхождения на подстроки из массива $graph.

Обработаем вывод сообщений написанной функцией:

Осталось обработать вывод функцией htmlspecialchars() в целях защиты от XSS-уязвимости и пропустить вывод через функцию nl2br(), которая заменит символы переноса строк на теги переноса строк (br).

Вот и все. Теперь в сообщениях выводятся полноценные смайлы, а не их символьное представление. На этом наш небольшой урок завершен. Удачи Вам и до новых встреч.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (7)

  1. KonTErStrik

    Хороший урок. Пошла внедрять)

  2. Андрей

    А как сделать, что бы код вставлялся не в конец текста, а в последнее место курсора при клике (каретки то есть)

    • Андрей Кудлай

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

      • Андрей

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

        Ну это так, просто интересно, возможно знаете куда ветер дует :)

        • Андрей Кудлай

          Пожалуйста :)
          Относительно контакта, то там работа идет не с текстовой областью, а с div’ом, имитирующим текстовую область. В div уже без проблем можно вставить картинку (смайл). Ну а сама текстовая область скрывается (display:none или type=hidden), а текст, который набирается в div’е — просто дублируется в текстовую область. В целом, примерно по такой схеме работает «текстовая область» вконтакте.

  3. Абай

    Спасибо! А как сделать чтобы смайлы появились на самом форме?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree