Что такое blur JavaScript?

"blur js". "Что такое blur JavaScript?"

Разберу подробно событие blur в JavaScript — как оно работает, когда срабатывает и как его использовать.

blur js

1. Что такое blur JavaScript?
2. Живой код blur в JavaScript.[
3. Пример blur в JavaScript.

1. Что такое blur JavaScript?

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

Оно срабатывает после того, как элемент теряет фокус (blur) после внесения изменений.

Элементы, поддерживающие событие blur JavaScript.

<input> (текстовые поля, чекбоксы, радиокнопки, range и др.);

<textarea>

<select>

Примерный синтаксис blur JavaScript?

Html :

<input type="text" id="idInput" placeholder="Событие blur">

JavaScript :

<script>

document.getElementById('idInput').addEventListener('blur', function(e) {

console.log('blur: ' + e.target.value); // Сработает после потери фокуса

});

</script>

Что значит "Сработает после потери фокуса"?

Т.е. когда курсор мыши покинет объект.

2. Живой код blur в JavaScript.

Давайте соберем собственный пример "blur в JavaScript", для этого вам понадобится :

Выше приведенный синтаксис с некоторыми изменениями...

Добавим тег div, чтобы вы могли видеть реальный живой пример прямо здесь на странице...

В него помещаем id с произвольным значением "here".

Любым из способов обратиться по id ..

Используем innerHTML для передачи вводимых данных.

Далее - e.target + value js... получим вот:

here. innerHTML = e.target.value ;

Соберем весь код blur в JavaScript.

Html :

<input type="text" id="id_input" placeholder="Событие blur">

<div id="here"></div>

JavaScript :

<script>

document.getElementById('id_input').addEventListener('blur', function(e) {

here. innerHTML = e.target.value ;

});

</script>

3. Пример blur в JavaScript.

Теперь давайте протестируем "blur в JavaScript":

Поставьте мышку в поле ввода и введите любое значение...

Кликните мышкой в любом другом месте на странице.

И вы увидите результат "blur в JavaScript":

Всего комментариев : Comments+ 2.0

1000

+ =

Отправить