Добавляем эмоций в текстовую область формы

Добавляем эмоций в текстовую область формы

От автора: в этом небольшом уроке мы реализуем возможность добавления смайлов в текстовую область формы средствами библиотеки jQuery. Полагаю, Вы уже пользовались такой возможностью неоднократно. В частности, используется она при добавлении поста на форуме, в комментариях, гостевой книге. Обычно рядом с текстовой областью, где пишется текст комментария, располагается блок со смайлами. Кликая на понравившемся смайле, мы добавляем его к нашему тексту. Думаю, идея понятна.

Детали учебника

Тема: jQuery + PHP

Сложность: Легкая

Урок: Видео (.mp4)

Время: 00:59:35

Размер архива: 67 Mb

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e — в свободное время как раз занимаюсь его изучением.

скачать исходникискачать урок

Прежде всего, нам потребуется минимальная разметка:

<!DOCTYPE html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Смайлы</title>
</head>
<body>
<div class="form">
	<form method="post" action="#">
		<textarea name="text" id="text"></textarea>
		<div class="smiles">Тут будут смайлы</div>
		<input type="submit" name="submit" value="Отправить" />
	</form>
</div>

</body>
</html>

Теперь добавим немного оформления:

<style type="text/css">
	.form{
		width:700px;
		margin:0 auto;
	}
	#text{
		width:100%;
		height:250px;
		border:1px solid #000;
	}
	.smiles{
		text-align:center;
	}
	.smile{
		cursor:pointer;
	}
</style>

Теперь немного рутины — необходимо добавить имеющиеся у нас смайлы в блок, отведенный для них. Все смайлы находятся в папке img:

<div class="smiles">
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	
	</span>
	<span>
	<img class="smile" src="img/biggrin.png" alt=":D">
	</span>
	<span>
	<img class="smile" src="img/laugh.png" alt=":lol:">
	</span>
	<span>
	<img class="smile" src="img/cool.png" alt="B)">
	</span>
	<span>
	<img class="smile" src="img/ph34r.png" alt=":ph34r:">
	</span>
</div>

Отлично! Смайлы расположились в отведенном для них блоке. Теперь подключим библиотеку jQuery и начнем писать несложный клиентский код:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		// здесь код...
	});
</script>

В чем заключается идея нашей дальнейшей работы? Если Вы обратили внимание, то каждая картинка смайла имеет свое уникальное значение атрибута alt — назовем его символьным представлением смайла. Картинка, соответственно, будет его графическим представлением.

Итак, идея заключается в том, чтобы при клике по смайлу получить значение его атрибута alt и добавить полученное символьное представление в текстовую область. Получим значение атрибута alt в переменную smile:

<script type="text/javascript">
	$(document).ready(function(){
		$(".smile").click(function(){
			var smile = $(this).attr('alt');
		});
	});
</script>

Перед тем, как добавить полученное значение в текстовую область, необходимо получить значение текстовой области, т.е. получить возможное ее содержание. Получим его в переменную text:

<script type="text/javascript">
	$(document).ready(function(){
		$(".smile").click(function(){
			var smile = $(this).attr('alt');
			var text = $("#text").val();
		});
	});
</script>

Ну и добавим смайл, изменяя значение текстовой области на новое — текст, который там был (или не был) плюс символьное представление смайла:

<script type="text/javascript">
	$(document).ready(function(){
		$(".smile").click(function(){
			var smile = $(this).attr('alt');
			var text = $("#text").val();
			$("#text").val(text + smile);
		});
	});
</script>

Отлично! Теперь при клике по смайлу он добавляется в текстовую область. Если до этого там был текст, то смайл добавляется после него. Осталось исправить некоторые недочеты. Мы привыкли, что перед вставляемым смайлом обязательно должен быть пробел, отделяющий смайл от текста. Добавим эти пробелы:

<script type="text/javascript">
	$(document).ready(function(){
		$(".smile").click(function(){
			var smile = $(this).attr('alt');
			var text = $("#text").val();
			$("#text").val(text + ' ' + smile + ' ');
		});
	});
</script>

Однако пользователь сам может поставить пробел после текста. Теперь, если он кликнет по смайлу, то появится лишний пробельный символ между текстом и смайлом. Исправим это, обрезая концевые пробелы при получении значения текста:

<script type="text/javascript">
	$(document).ready(function(){
		$(".smile").click(function(){
			var smile = $(this).attr('alt');
			var text = $.trim($("#text").val());
			$("#text").val(text + ' ' + smile + ' ');
		});
	});
</script>

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

<script type="text/javascript">
	$(document).ready(function(){
		$(".smile").click(function(){
			var smile = $(this).attr('alt');
			var text = $.trim($("#text").val());
			$("#text").focus().val(text + ' ' + smile + ' ');
		});
	});
</script>

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

Для указанных целей создадим базу данных с одной таблицей. В таблице создадим 2 поля — первое поле будет счетчиком сообщений (id типа INT, имеющее атрибут Первичного ключа, автоинкрементируемое), второе будет хранить текст сообщений (тип TEXT).

Соединимся с БД:

@mysql_connect("localhost", "root", "") or die("No connect to Server");
mysql_select_db("test") or die("No connect to DB");
mysql_query("SET NAMES utf8") or die("Cant set charset");

Теперь реализуем добавление сообщений в БД:

if($_POST['submit']){
	$text = mysql_real_escape_string(trim($_POST['text']));
	$query = "INSERT INTO smile(text) VALUES('$text')";
	mysql_query($query) or die(mysql_error());
	header("Location: index.php");
	exit;
}

И, наконец, получение сообщений:

$posts = array();
$query = "SELECT * FROM smile ORDER BY id DESC";
$res = mysql_query($query) or die(mysql_error);
while($row = mysql_fetch_assoc($res)){
	$posts[] = $row;
}

Все сообщения получены в массив $posts. Выведем сообщения из массива в нужном месте, к примеру, сразу после формы:

<?php
	foreach($posts as $post){
		echo $post['text']. "<hr />";
	}	
?>

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

function smile($var){
	$symbol = array(':mellow:',
					'&lt;_&lt;',
					':)',
					':wub:',
					':angry:',
					':(',
					':unsure:',
					':wacko:',
					':blink:',
					'-_-',
					':rolleyes:',
					':huh:',
					'^_^',
					':o',
					';)',
					':P',
					':D',
					':lol:',
					'B)',
					':ph34r:');
	$graph = array('',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'',
					'<img src="img/biggrin.png">',
					'<img src="img/laugh.png">',
					'<img src="img/cool.png">',
					'<img src="img/ph34r.png">');
	return str_replace($symbol, $graph, $var);
}

Здесь все просто — функция возвращает результат работы штатной функции str_replace(), которая, в свою очередь, ищет в строке $var вхождения подстроки из массива $symbol и меняет эти вхождения на подстроки из массива $graph.

Обработаем вывод сообщений написанной функцией:

	foreach($posts as $post){
		echo smile($post['text']). "<hr />";
	}

Осталось обработать вывод функцией htmlspecialchars() в целях защиты от XSS-уязвимости и пропустить вывод через функцию nl2br(), которая заменит символы переноса строк на теги переноса строк (br).

	foreach($posts as $post){
		echo nl2br(smile(htmlspecialchars($post['text']))). "<hr />";
	}

Вот и все. Теперь в сообщениях выводятся полноценные смайлы, а не их символьное представление. На этом наш небольшой урок завершен. Удачи Вам и до новых встреч.

Проверка формы без перезагрузки с помощью JavaScript

Прямо сейчас посмотрите курс по организации динамической работы с формами!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (6)

  1. KonTErStrik

    Хороший урок. Пошла внедрять)

  2. Андрей

    А как сделать, что бы код вставлялся не в конец текста, а в последнее место курсора при клике (каретки то есть)

    • Андрей Кудлай

      В сети можно найти несколько вариантов, например здесь.

      • Андрей

        Спасибо, разобрался.. Раньше как то не затрагивал эту тему и вдруг стало интересно, как же реализованы смайлы вконтакте ведь текстовое поле не преобразовывает html теги, а у них при клике по смайлу добавляется со смайлом..

        Ну это так, просто интересно, возможно знаете куда ветер дует :)

        • Андрей Кудлай

          Пожалуйста :)
          Относительно контакта, то там работа идет не с текстовой областью, а с div’ом, имитирующим текстовую область. В div уже без проблем можно вставить картинку (смайл). Ну а сама текстовая область скрывается (display:none или type=hidden), а текст, который набирается в div’е — просто дублируется в текстовую область. В целом, примерно по такой схеме работает «текстовая область» вконтакте.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree