JS События

Текстовые поля

Для ввода простейшей текстовой информации предназначены элементы <input type="text": <input type="text" name="kye" size="10" maxlength="15" value="hello world" /> Данный элемент поддерживает ряд событий, в частности:

focus: происходит при получении фокуса
blur: происходит при потере фокуса
change: происходит при изменении значения поля
select: происходит при выделении текста в текстовом поле
keydown: происходит при нажатии клавиши клавиатуры
keypress: происходит при нажатии клавиши клавиатуры для печатаемых символов
keyup: происходит при отпускании ранее нажатой клавиши клавиатуры

Применим ряд событий:

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	</head>
	<body>
	<form name="search">
	<input type="text" name="key" placeholder="Введите ключ"></input>
	<input type="button" name="print" value="Печать" />
	</form>
	<div id="printBlock"></div>
	<script>
	var keyBox = document.search.key;
	
	// обработчик изменения текста
	function onchange(e){
	// получаем элемент printBlock
	var printBlock = document.getElementById("printBlock");
	// получаем новое значение
	var val = e.target.value;
	// установка значения
	printBlock.textContent = val;
	}
	// обработка потери фокуса
	function onblur(e){
	
	// получаем его значение и обрезаем все пробелы
	var text = keyBox.value.trim();
	if(text==="")
	keyBox.style.borderColor = "red";
	else
	keyBox.style.borderColor = "green";
	}
	// получение фокуса
	function onfocus(e){
	
	// установка цвета границ поля
	keyBox.style.borderColor = "blue";
	}
	keyBox.addEventListener("change", onchange);
	keyBox.addEventListener("blur", onblur);
	keyBox.addEventListener("focus", onfocus);
	</script>
	</body>
	</html>

Здесь к текстовому полю прикрепляется три обработчика для событий blur, focus и change. Обработка события change позволяет сформировать что-то вроде привязки: при изменении текста весь текст отображается в блоке printBlock. Но надо учитывать, что событие change возникает не сразу после изменения текста, а после потери им фокуса.

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

Кроме данного текстового поля есть еще специальные поля ввода. Так, поле <input type="password" предназначено для ввода пароля. По функциональности оно во многом аналогично обычному текстовому полю за тем исключением, что для вводимых символов используется маска:

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


	<input type="hidden" name="id" value="345" />

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

Элемент textarea

Для создания многострочных текстовых полей используется элемент textarea: Данные элемент генерирует все те же самые события, что и обычное текстовое поле:

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	</head>
	<body>
	<form name="search">
	<textarea rows="7" cols="40" name="message">
	</form>
	<div id="printBlock"></div>
	<script>
	var messageBox = document.search.message;
	
	// обработчик ввода символа
	function onkeypress(e){
	// получаем элемент printBlock
	var printBlock = document.getElementById("printBlock");
	// получаем введенный символ
	var val = String.fromCharCode(e.keyCode);
	// добавление символа
	printBlock.textContent += val;
	}
	
	function onkeydown(e){
	if(e.keyCode===8){ // если нажат Backspace
	
	// получаем элемент printBlock
	var printBlock = document.getElementById("printBlock"), 
	length = printBlock.textContent.length;
	// обрезаем строку по последнему символу
	printBlock.textContent = printBlock.textContent.substring(0, length-1);
	}
	}
	
	messageBox.addEventListener("keypress", onkeypress);
	messageBox.addEventListener("keydown", onkeydown);
	</script>
	</body>
	</html>

Здесь к текстовому полю прикрепляются обработчики для событий keypress и keydown. В обработчике keypress получаем введенный символ с помощью конвертации числового кода клавиши в строку:


	var val = String.fromCharCode(e.keyCode);

Затем символ добавляется к содержимому блока printBlock.
Событие keypress возникает при нажатии на клавиши для печатаемых символов, то такие символы отображаются в текстовом поле. Однако есть и другие клавиши, которые оказывают влияние на текстовое поле, но они не дают отображаемого символа, поэтому не отслеживаются событием keypress. К таким клавишам относится клавиша Backspace, которая удаляет последний символ. И для ее отслеживания также обрабатываем событие keydown. В обработчике keydown удаляем из строки в блоке printBlock последний символ. Output