Блог

Главная - Вопросы по программированию - Создание обработчика событий для события blur

Создание обработчика событий для события blur

#javascript #event-handling #blur

#javascript #обработка событий #размытие

Вопрос:

Попытка создать событие blur, которое использует свойство target объекта event для получения элемента ввода, для которого активно событие. Я добавил код в самом низу того, что я считал правильным, но изо всех сил пытался реализовать его, не испортив первую часть.

Также пытаюсь поместить <script> </script> во внешний файл Javascript, но когда я пытаюсь, это не работает. Не уверен, что есть что-то, что зависит от того, находится ли это в файле HTML.

 <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <input type="text" name="username" value="Username" minLength="6" 
maxlength="10" required>
  <br><br>
  <input type="text" name="password" value="Password" minLength="8" maxlength="15" required>
  <br><br>
  <input type="submit" value="Submit" onclick="function()">
</form> 

<script>

document.addEventListener("DOMContentLoaded", function() {
  var textElements = [...document.getElementsByTagName('input')];
  var listen = function(item, index) {
    item.addEventListener('keyup', function(ev){
      if (event.target.validity.valid) {
          item.style.border = "solid green 2px";
          item.style.boxShadow = "0 0 5px green";
      } else {
          item.style.border = "solid red 2px";
          item.style.boxShadow = "0 0 5px red";
      }
    })
  }
  textElements.forEach(listen);
});

form.addEventListener('blur', function( event ) {
  event.target.style.border = "solid white 2px";
  event.target.style.boxShadow = "0 0 5px white";
}, true);


</script>

</body>
</html>

Ответ №1:

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

 document.addEventListener("DOMContentLoaded", function() {
  var textElements = [...document.getElementsByTagName('input')];
  var listen = function(item, index) {
    item.addEventListener('keyup', function(ev) {
      if (event.target.validity.valid) {
        item.style.border = "solid green 2px";
        item.style.boxShadow = "0 0 5px green";
      } else {
        item.style.border = "solid red 2px";
        item.style.boxShadow = "0 0 5px red";
      }
    })
  }
  textElements.forEach(listen);
});

document.querySelector('form').addEventListener('blur', function(event) {
  event.target.style.border = "solid white 2px";
  event.target.style.boxShadow = "0 0 5px white";
}, true);  
 <form action="/action_page.php">
  <input type="text" name="username" value="" minLength="6" maxlength="10" required placeholder="Username">
  <br><br>
  <input type="text" name="password" value="" minLength="8" maxlength="15" required placeholder="Password">
  <br><br>
  <input type="submit" value="Submit" onclick="function()">
</form>

Если вам не нужны никакие дополнительные проверки, и вам нужно только визуализировать корректность ввода, то вы можете обойтись без JS:

 input {
  border: solid white 2px;
  boxShadow: 0 0 5px white;
}

input:focus:valid {
  border: solid green 2px;
  boxShadow: 0 0 5px green;
}

input:focus:invalid {
  border: solid red 2px;
  boxShadow: 0 0 5px red;
}  
 <form action="/action_page.php">
  <input type="text" name="username" value="" minLength="6" maxlength="10" required placeholder="Username">
  <br><br>
  <input type="text" name="password" value="" minLength="8" maxlength="15" required placeholder="Password">
  <br><br>
  <input type="submit" value="Submit" onclick="function()">
</form>

Ответ №2:

Я удалил много другого кода, поскольку на самом деле это не было частью вопроса.

Переключился на focusout событие, когда оно всплывает.

Вы можете настроить matches фильтр в соответствии с вашими потребностями.

Также я изменил white на red для демо, поскольку оно не отображалось 🙂

 document.addEventListener('focusout', (e) => {
  console.log(e.target);
  if(e.target.matches('input')) {
    e.target.style.border = "solid red 2px";
    e.target.style.boxShadow = "0 0 5px red";    
  }
});  
 <form action="/action_page.php">
  <input type="text" name="username" value="Username" minLength="6" maxlength="10" required>
  <br><br>
  <input type="text" name="password" value="Password" minLength="8" maxlength="15" required>
  <br><br>
  <input type="submit" value="Submit" onclick="function()">
</form>

Вот версия с полным кодом, который вы опубликовали.

 document.addEventListener("DOMContentLoaded", function() {
  var textElements = [...document.getElementsByTagName('input')];
  var listen = function(item, index) {
    item.addEventListener('keyup', function(ev) {
      if (event.target.validity.valid) {
        item.style.border = "solid green 2px";
        item.style.boxShadow = "0 0 5px green";
      } else {
        item.style.border = "solid red 2px";
        item.style.boxShadow = "0 0 5px red";
      }
    })
  }
  textElements.forEach(listen);
});

document.addEventListener('focusout', (e) => {
  console.log(e.target);
  if (e.target.matches('input')) {
    e.target.style.border = "solid red 2px";
    e.target.style.boxShadow = "0 0 5px red";
  }
});  
 <!DOCTYPE html>
<html>

<body>

  <form action="/action_page.php">
    <input type="text" name="username" value="Username" minLength="6" maxlength="10" required>
    <br><br>
    <input type="text" name="password" value="Password" minLength="8" maxlength="15" required>
    <br><br>
    <input type="submit" value="Submit" onclick="function()">
  </form>

</body>

</html>

Для включения вашего скрипта.

Добавьте тег в конце вашего HTML-кода перед </body> тегом.

Что-то вроде этого:

<script src="scripts/script.js"></script>