Question

尝试创建一个模糊事件，该事件使用事件对象的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>

Answer 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>

Answer 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>

为模糊事件创建事件处理程序

2 个答案: