为blur事件创建事件处理程序

问题描述 投票：1回答：2

尝试创建一个blur事件，该事件使用事件对象的target属性来获取事件处于活动状态的输入元素。我在最底层添加了我认为正确的代码，但是在没有搞砸第一部分的情况下努力实现它。

还尝试将<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>
javascript event-handling blur
2个回答
2
投票

我不确定我是否理解正确，但在我看来，问题是在分配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
投票

我删除了很多其他代码，因为它不是问题的一部分。

当它起泡时切换到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>

包括你的脚本。

在</body>标记之前的HTML末尾添加标记。

像这样的东西：

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.