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

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

Для ввода простейшей текстовой информации предназначены элементы <input type="text":

<input type="text" name="kye" size="10" maxlength="15" value="hello world" />

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

  • focus: происходит при получении фокуса

  • blur: происходит при потере фокуса

  • change: происходит при изменении значения поля

  • input: происходит при изменении значения поля

  • select: происходит при выделении текста в текстовом поле

  • keydown: происходит при нажатии клавиши клавиатуры

  • keypress: происходит при нажатии клавиши клавиатуры для печатаемых символов

  • keyup: происходит при отпускании ранее нажатой клавиши клавиатуры

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
<form name="search">
	<input type="text" name="key" placeholder="Введите ключ" />
	<input type="button" name="print" value="Печать" />
</form>
<div id="printBlock"></div>
<script>
const keyBox = document.search.key;

// обработчик изменения текста
function onchange(e){
	// получаем элемент printBlock
	const printBlock = document.getElementById("printBlock");
	// получаем новое значение
	const val = e.target.value;
	// установка значения
	printBlock.textContent = val;
}
// обработка потери фокуса
function onblur(e){
	
	// получаем его значение и обрезаем все пробелы
	const 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

Кроме события change мы можем обрабатывать изменение введенного текста, обрабатывая событие input. Но если событие change возникает, когда пользователь закончит ввод и переведт фокус с текстового поля на другой элемент, то событие input возникает сразу при вводе нового символа или удаления имеющегося:

const keyBox = document.search.key;
 
// обработчик изменения текста
function oninput(e){
    // получаем элемент printBlock
    const printBlock = document.getElementById("printBlock");
    // получаем новое значение
    const val = e.target.value;
    // установка значения
    printBlock.textContent = val;
}

keyBox.addEventListener("input", oninput);

Поле ввода пароля

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
 <form name="loginForm">
    <input type="password" name="password" />
</form>
<div id="printBlock"></div>
<script>
const passwordBox = document.loginForm.password;
 
// обработчик изменения текста
function oninput(e){
    // получаем элемент printBlock
    const printBlock = document.getElementById("printBlock");
    // получаем новое значение
    printBlock.textContent = e.target.value;
} 
passwordBox.addEventListener("input", oninput); 
</script>
</body>
</html>
Получение пароля с помощью кода JavaScript

Скрытое поле

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

<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>
const messageBox = document.search.message;

// обработчик ввода символа
function onkeypress(e){
	// получаем элемент printBlock
	const printBlock = document.getElementById("printBlock");
	// получаем введенный символ
	const val = String.fromCharCode(e.keyCode);
	// добавление символа
	printBlock.textContent += val;
}

function onkeydown(e){
	if(e.keyCode===8){ // если нажат Backspace
	
		// получаем элемент printBlock
		const 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 получаем введенный символ с помощью конвертации числового кода клавиши в строку:

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

Затем символ добавляется к содержимому блока printBlock.

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

Обработка keypress в JavaScript

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850