Установить смайлики на сайт, простой JS код смайликов себе на сайт
Автор: © web-rubik
3372 Просмотры
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" сохранённое слово (значение).
В коде я всё прокомментировал, думаю всё понятно. На этом всё, будут вопросы, пишите в комментариях..
Понравилось 1
Комментариев нет или
Оставить комментарий
Оставленные комментарии проверяются технической частью интернет портала Web-rubik.ru