Установить смайлики на сайт, простой JS код смайликов себе на сайт
Автор: © web-rubik
1966 Просмотры
1 Понравилось
Не так часто приходилось мне работать со смайликами, но на своей практике у меня всегда были разные решения. Одно из таких решений мне очень понравилось, с ним я и хочу с Вами поделиться.
Вот сам JS код
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Смайлики для сайта</title> <script src="js/jquery.min.js"></script> </head> <body> <div style="text-align:center; padding-top:10%;"> <h3>Поставь смайлик</h3> <form action="" method="post"> <textarea id="text" name="text" rows="6" placeholder="Сообщение:" ></textarea> <br> <!-- Смайлики --> <span id="smiley" style="cursor:pointer;">😃 😄 😁 😆 😅 🤣 🤨 😐</span> <br><br> <input name="send" type="submit" value="Отправить"> </form> </div> <script> $('#smiley').click(function() { var sel = window.getSelection(); var str = sel.anchorNode.nodeValue, len = str.length, a = b = sel.anchorOffset; while (str[a] != ' ' && a --) {}; if (str[a] == ' ') a ++; // Начало текста while (str[b] != ' ' && b ++< len) {}; // Конец текста var appendData = str.substring(a,b); // Смайлик по которому кликнули var currentData = $("#text").val(); // Содержимое для добавления смайлика var newData = currentData + appendData; // Добавляем к содержимому смайлик $("#text").val(newData); // Вставляем в форму }); </script> </body> </html>
Что тут происходит. Если происходит клик по span id="smiley", мы создаём массив слов (значений) и записываем в переменную слово (значение) по которому кликнули. Далее добавляем в textarea id="text" сохранённое слово (значение).
В коде я всё прокомментировал, думаю всё понятно. На этом всё, будут вопросы, пишите в комментариях..
Комментариев нет или
Оставить комментарий
Оставленные комментарии проверяются технической частью интернет портала Web-rubik.ru