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

Последнее обновление: 1.11.2015

Для ввода простейшей текстовой информации предназначены элементы <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 позволяет провести валидацию введенного значения. Например, в данном случае если текст состоит из пробелов или не был введен, то окрашиваем границу поля в красный цвет.

Изменение текста в JavaScript

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

<input type="password" name="password" />

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

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

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

Элемент textarea

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

<textarea rows="15" cols="40" name="textArea"></textarea>

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
<form name="search">
	<textarea rows="7" cols="40" name="message"></textarea>
</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 последний символ.

Обработка keypress в JavaScript
Помощь сайту
WebMoney
  • P378451176208
  • Z280152397659
ЮMoney/Яндекс-Деньги
  • 410011174743222
PayPal
  • metanit22@mail.ru
Перевод на карту
  • Номер карты: 4048415020898850