Создание обработчика событий для события размытия - PullRequest
Новая
       22

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

1 голос
/ 06 марта 2019

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

Также пытаюсь поместить <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>

Ответы [ 2 ]

2 голосов
/ 06 марта 2019

Я не уверен, что правильно понял, но, на мой взгляд, проблема в том, что элемент 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>
0 голосов
/ 06 марта 2019

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

Переключено на событие 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>

...