Отмена исполнения clearTimeout

Методы setTimeout() и setInterval() возвращает числовой идентификатор таймера timerId, который можно использовать для отмены действия.

Синтаксис:

var timerId = setTimeout(...);

clearTimeout(timerId);

В следующем примере мы ставим таймаут, а затем удаляем. В результате ничего не происходит.

var timerId = setTimeout(function() { alert(timerId) }, 1000);

clearTimeout(timerId);

alert(timerId); // всё ещё число, оно не обнуляется после отмены

Как видно из alert, в браузере идентификатор таймера является обычным числом.

Рабочий пример

Следующий код, при запуске, выводить сообщение каждые две секунды, пока не пройдёт 5 секунд:

// начать повторы с интервалом 2 сек

var timerId = setInterval(function() {

alert("тик");

}, 2000);

// через 5 сек остановить повторы

setTimeout(function() {

clearInterval(timerId);

alert('стоп');

}, 5000);

Работа с формами через JS

Элементы управления, такие как <form>, <input> и другие имеют большое количество своих важных свойств и ссылок.

Выбор формы и её элементов

Формы и элементы, содержащиеся в них, можно выбрать с помощью стандартных методов, таких как getElementById() и getElementsByTagName():

var fields = document.getElementById("address").getElementsByTagName("input");

В браузерах, поддерживающих querySelectorAll(), можно выбрать все радиокнопки или все элементы с одинаковыми именами, присутствующие в форме, как показано ниже:

// Все радиокнопки в форме с атрибутом id="shipping"

document.querySelectorAll('#shipping input[type="radio"]');

// Все радиокнопки с атрибу­том name="method" в форме с атрибутом

id="shipping" document.querySelectorAll('#shipping input[type="radio"][name="method"]');

Еще способ выбрать фору

По порядковому номеру, например: document.forms[n] // Не­на­деж­ный: n - по­ряд­ко­вый но­мер фор­мы

С установленным атрибутом name или id можно также выбрать другими способами, например:

window.address // Не­на­деж­ный: ста­рай­тесь не ис­поль­зо­вать

document.address // Мо­жет при­ме­нять­ся толь­ко к фор­мам с ат­ри­бу­том name document.forms.address // Яв­ное об­ра­ще­ние к фор­ме с ат­ри­бу­том name или id

Элементы input и textarea

Для большинства типов input значение ставится/читается через свойство value.

input.value = "Новое значение";

textarea.value = "Новый текст";

Важно!

Не используйте textarea.innerHTML потому что оно хранит только HTML, изначально присутствовавший в элементе, и не меняется при изменении значения.

Фокусировка: focus/blur

Обычно фокусировка автоматически происходит при нажатии на элементе мышкой, но также можно перейти на элемент клавиатурой – через клавишу Tab, нажатие пальцем на планшете и так далее.

Момент получения фокуса и потери очень важен.

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

При потере – проверить данные, которые ввёл посетитель.

Кроме того, иногда полезно «вручную», из JavaScript перевести фокус на нужный элемент, например, на поле в динамически созданной форме.

Событие focus вызывается тогда, когда пользователь фокусируется на элементе, а blur – когда фокус исчезает, например, посетитель кликает на другом месте экрана.

Событие change

Событие change происходит по окончании изменения значения элемента формы, когда это изменение зафиксировано.

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

<input type="text" onchange="alert(this.value)">

<input type="button" value="Кнопка">

Для остальных же элементов оно срабатывает сразу.

Событие input

Событие input срабатывает тут же при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.

В современных браузерах oninput – самое главное событие для работы с элементом формы. Именно его, а не keydown/keypress следует использовать.

События cut, copy, paste

Эти события используются редко. Они происходят при вырезании / вставке / копировании значения.

К сожалению, кросс-браузерного способа получить данные, которые вставляются/копируются, не существует, поэтому их основное применение – это отмена соответствующей операции.

События изменения данных:

Событие	Описание	Особенности
change	Изменение значения любого элемента формы. Для текстовых элементов срабатывает при потере фокуса.	В IE8- на чекбоксах ждет потери фокуса, поэтому для мгновенной реакции ставят также onclick-обработчик.
input	Событие срабатывает только на текстовых элементах. Оно не ждет потери фокуса, в отличие от change.	В IE8- не поддерживается, в IE9 не работает при удалении символов.
cut/copy/paste	Срабатывают при вставке / копировании / удалении текста. Если в их обработчиках отменить действие браузера, то вставки / копирования / удаления не произойдёт.	Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё старое значение, а новое недоступно.