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

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

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

В общем, начинаем. Не буду мудрить, сразу привожу 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 именно для элемента страницы с этим идентификатором. Вот что у нас получилось:

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

просмотров: 15771 комментариев: 20

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

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

fdgdfg

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

кстати да,мне тоже интересно насчет вставки,где курсор.

прикольно

А как сделать так, чтобы смайлик вставал именно в то место сообщения, где находится курсор?) а не в самый конец строчки