Уважаемые читатели сайта Ajaxs.ru

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

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JavaScript / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Вставка смайликов в форму

Путешествуя по интернету, Вы наверняка встречались с сайтами, на которых можно комментировать статьи или какие-нибудь материалы. Ведь каждый автор хочет знать, что думают люди о его статьях и сайте в целом. Простые текстовые комментарии это уже хорошо, но было бы гораздо интереснее, если бы люди могли выражать свои эмоции с помощью смайликов улыбочек. Конечно, их можно просто ввести с клавиатуры, но не каждый захочет это делать, поэтому я покажу Вам один скрипт, который поможет в этом. Все что вам потребуется – это картинки смайликов и JavaScript , которые можно скачать по ссылке выше.  Помещаем их в папку, например, smail . Теперь между тегами <head></head> подключим скрипт для работы со смайликами:

Пример

<script type="text/javascript" src="smail/smail.js"></script>

Теперь создадим форму и добавим вставку смайликов:

<form action="#" method="post" name="forma">
<label>Ваше имя: </label>
<input name="author" type="text" size="30"><br>
<label>Текст комментария:</label><br>
<textarea name="text" rows="5" cols="50" id="comment"></textarea><br>

<a href="javascript:%20x()" onclick="DoSmilie(' :-)) ');">
<img
src="smail/big_grin.png" alt="Очень доволен">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' :-) ');">
<img
src="smail/happy.png" alt="Улыбается">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' :-| ');">
<img
src="smail/dumbfounded.png" alt="Грустный">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' 8-P ');">
<img
src="smail/crazy.png" alt="Ржу">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' :-] ');">
<img
src="smail/appalled.png" alt="Озадачен">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' ;-( ');">
<img
src="smail/evil.png" alt="Недоволен">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' :-o ');">
<img
src="smail/pipe.png" alt="Не причем">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' :sleep: ');">
<img
src="smail/sleep.png" alt="Сплю">
</a>
<br><br>
<input type="submit" value="Добавить комментарий"> </form>  

Теперь сохраняем страницу и смотрим, должна появится форма и под ней изображения смайликов, при нажатии на которые, в форму подставляются текстовые смайлики. Каждая строчка ссылка с изображением отвечает за свой смайлик и их может быть сколько угодно много. Если Вы хотите чтобы в форму подставлялось другие символы то измените их в параметре onclick. Так что если у Вас на сайте есть возможность оставлять комментарии, можете использовать этот скрипт. А как заменять текстовые смайлики на графические Вы можете посмотреть в уроке Замена текстовых смайликов на графические.

Ну вот и все на сегодня!

Автор: Евгений Бочкарев Урок добавлен: 7 Августа 2009 в 16:57 Просмотров: 19119

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (3)

#4 Евгений 07-02-2011 в 19:42
poxmax, вы меняете не тот параметр. forma это имя всей формы а не поля <textarea>, а имя этого поля в примере text. Т.е. в скрипте нужно менять значение text на message, при этом имя формы останется forma либо изменить и его.
#5 DENISSISS 28-04-2012 в 18:46
лучше "function DoSmilie(addSmilie) {
document.forma.text.value = document.forma.text.value+addSmilie;
document.forma.text.focus();
return;
}"
#6 халид 30-07-2012 в 15:56
8-р
#7 Влад 20-12-2012 в 15:12
Скрипт взят из скрипта гостевой книги, зачем копировать то что уже написано
#8 афтыр 22-12-2012 в 16:11
В <textarea> text меняю на свой mess - выходит «не все поля заполнены».
Как же поменять этот текст
#9 Дмитрий 20-03-2013 в 21:08
Спс за статью и измените ссылку "Замена текстовых смайликов на графические" она у вас не туда ведет.
#10 Андрей 19-11-2013 в 13:26
есть чат

http://dbaradio.ru

не могу подключить... уже менял в js имя формы имя поля textarea ничего не помогает.. смайлы не добавляются в поле.. подскажите где еще может быть косяк?
#11 Андрей 19-11-2013 в 13:48
если нужно могу скинуть js скрипты самого чата..
#12 Vladislav 26-05-2014 в 01:58
Подскажите,а как мне сделать так что бы при нажатии открывались смайлы и только там выбирать их!
#13 da 11-08-2014 в 16:13
как поставить смайл в произвольное место текста, а не только в конце?
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки