Поля ввода

Атрибуты

type = "значение" задает тип поля ввода
value = "значение" значение по умолчанию в поле ввода, в случае с кнопкой задает ее текст
placeholder = "значение" подсказка в поле ввода
name = "значение" имя поля ввода, нужно для получения данных поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают — в PHP придут данные того поля ввода, которое ниже в HTML коде
disabled = "значение" блокирует элемент формы

События

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

Элемент input

Для ввода информации предназначены элементы <input>:

<input type="text" name="kye" value="hello world" />

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

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

Элемент textarea

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

<textarea 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 последний символ.