Добавляем в форму смайлики

На самом деле добавить в форму гостевой книги или комментариев смайлики не так сложно, как кажеться — нужно только прочитать эту статью :)

Итак, возникла потребность добавить к форме гостевой книги или комментариев статей/новостей вывод смайликов, что бы при клике на «мордочку» в поле ввода текста вставлялся код смайлика. Еще желательно, что бы посетитель сайта по своему желанию открывал и закрывал таблицу со смайлами. На самом деле — ничего сложного. Писанины правда выйдет много :)

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

<script language="javascript" type="text/javascript">
<!--
var ie=document.all?1:0;
var ns=document.getElementById&&!document.all?1:0;

function InsertSmile(SmileId)
{
    if(ie)
    {
    document.all.message.focus();
    document.all.message.value+=" "+SmileId+" ";
    }

    else if(ns)
    {
    document.forms['guestbook'].elements['message'].focus();
    document.forms['guestbook'].elements['message'].value+=" "+SmileId+" ";
    }

    else
    alert("Ваш браузер не поддерживается!");
}
// -->
</script>

Не важно, где вы это напишете — главное, ДО того, как будет вызвана сама функция вывода смайликов. Затем изобразим поле texarea, в которое нам нужно вставлять смайлы, и саму табличку смайликов:

<form method="post" name="guestbook">
<textarea name="message" cols="50" rows="10"></textarea>
<br />
<table>
<tr>
    <td style="cursor: pointer;" onclick='InsertSmile(":)")'><img src='/images/smiles/01.gif'' alt='улыбка' / ></td>
    <td style="cursor: pointer;" onclick='InsertSmile(":smoke:")'><img src='/images/smiles/02.gif' alt='Курилка' /></td>
    <td style="cursor: pointer;" onclick='InsertSmile(":babah:")'><img src='/images/smiles/03.gif' alt='Убей себя ап стену :)' /></td>
</tr> <tr>
    <td style="cursor: pointer;" onclick='InsertSmile("8)")'><img src='/images/smiles/04.gif'' alt='Круто' / ></td>
    <td style="cursor: pointer;" onclick='InsertSmile(";)")'><img src='/images/smiles/05.gif' alt='Подмигиваю' /></td>
    <td style="cursor: pointer;" onclick='InsertSmile(":sorry:")'><img src='/images/smiles/06.gif' alt='Ну извините...' /></td>
</tr>
</table>
</form>

Нам нужно только привязать поле textarea к нашей функции JavaScript — что мы и сделали, указав имя текстового поля message (оно же указано и в JS-функции). Обратите внимание — я указал для ячеек таблицы свойство CSS cursor: pointer — это необходимо, что бы при наведении мышки на смайлик курсор принимал вид «лапки».

Для этого урока я взял 6 смайликов (или, как их называет их создатель — «колобков») замечательного художника Aiwan. В итоге вот что у нас получилось:

В принципе, это все — при клике на смайлик в форму вноситься его код (обозначение), который в последствии будет заменен скриптом на соответствующую картинку (как это сделать на PHP — я расскажу в следующей статье), нам осталось только сделать форму вывода смайлов закрывающейся. Для этого я возьму еще одну функцию JavaScript, не раз меня выручавшую. Правда, она больше подходит для использования в циклах, но мне она нравиться своей простотой. Вот она:

    <script language="JavaScript">
        function xhs(id) {
            t=document.getElementById(id);
                if(t.style.display=='none') t.style.display='';
                else t.style.display='none'
            return false;
        }
    </script>

Далее мы скроем таблицу со смайликами, используя свойство CSS display: none;. JavaScript-функция, приведенная выше, изменяет свойство элемента display. Нашей таблице со смайликами нужно присвоить уникальный ID, и сделать кнопочку, которая будет вызывать эту функцию. Теперь код вывода формы выглядит так:

<form method="post" name="guestbook">
<textarea name="message" cols="50" rows="10"></textarea>
<br />
<input type="button" value="смайлики" onclick="xhs('id123')" />
<br />
<table id="id123" style="display: none;">
<tr>
    <td style="cursor: pointer;" onclick='InsertSmile(":)")'><img src='/images/smiles/01.gif'' alt='улыбка' / ></td>
    <td style="cursor: pointer;" onclick='InsertSmile(":smoke:")'><img src='/images/smiles/02.gif' alt='Курилка' /></td>
    <td style="cursor: pointer;" onclick='InsertSmile(":babah:")'><img src='/images/smiles/03.gif' alt='Убей себя ап стену :)' /></td>
</tr> <tr>
    <td style="cursor: pointer;" onclick='InsertSmile("8)")'><img src='/images/smiles/04.gif'' alt='Круто' / ></td>
    <td style="cursor: pointer;" onclick='InsertSmile(";)")'><img src='/images/smiles/05.gif' alt='Подмигиваю' /></td>
    <td style="cursor: pointer;" onclick='InsertSmile(":sorry:")'><img src='/images/smiles/06.gif' alt='Ну извините...' /></td>
</tr>
</table>
</form>

Обратите внимание: таблице со смайликами присвоен идентификатор — id="id123", и у кнопки вызов события onclick именно для элемента страницы с этим идентификатором. Вот что у нас получилось:

Вот собственно, и все. По своему желанию вы можете добавить сколько угодно и каких угодно смайликов.

просмотров: 28655 комментариев: 23

thanks

1) Спасибо автору статьи за проделаную работу. Хотелось бы задать только один вопрос. Что бы Вы делали если бы у Вас было 64смайлика и уже готовый преобразователь на РНР? 64=8*8, таблица великовата...
2) Курсор можно заменить методами Flash или таким образом:
.zoom
{
cursor: url(zoom.png), url(images/zoom.png), default
}
и всему подряд поприсваивать класс zoom

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

А можно както обойтись вот без этой строчки
<form method="post" name="guestbook">?
изза нее все ламается!

А в натуре, как сделать чтобы смайл вставлялся на место курсора?
Иначе сему деянию нет места в WEB :(

Ничё не врите,у меня IE 9 стоит и отлично всё пашет.

+1
как дописать, чтобы вставляло на место курсора?