Javascript 为模糊事件创建事件处理程序_Javascript_Event Handling_Blur

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

javascript

Javascript 为模糊事件创建事件处理程序,javascript,event-handling,blur,Javascript,Event Handling,Blur,尝试创建一个模糊事件，该事件使用事件对象的target属性获取事件处于活动状态的输入元素。我在最底层添加了我认为正确的代码，但在不破坏第一部分的情况下很难实现它还试图将放入外部Javascript文件中，但当我尝试时，它不起作用。不确定HTML文件中是否有依赖于它的内容 <!DOCTYPE html> <html> <body> <form action="/action_page.php"> <input type="text" n

尝试创建一个模糊事件，该事件使用事件对象的target属性获取事件处于活动状态的输入元素。我在最底层添加了我认为正确的代码，但在不破坏第一部分的情况下很难实现它

还试图将

放入外部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>








document.addEventListener（“DOMContentLoaded”，function（））{
var textElements=[…document.getElementsByTagName（'input'）；
var listen=函数（项、索引）{
项目.添加的EventListener（'keyup'，功能（ev）{
if（event.target.validity.valid）{
item.style.border=“纯绿2px”；
item.style.boxShadow=“0 5px绿色”；
}否则{
item.style.border=“纯红2px”；
item.style.boxShadow=“0 0 5px红色”；
}
})
}
textElements.forEach（监听）；
});
form.addEventListener（'blur'，函数（事件）{
event.target.style.border=“纯白2px”；
event.target.style.boxShadow=“0 0 5px白色”；
}，对）；

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

在气泡出现时切换到

focusout

事件

您可以调整

匹配项

过滤器以满足您的需要

我还将演示的

白色

改为

红色

，因为它没有显示：）

document.addEventListener（'focusout'，（e）=>{
console.log（如target）；
if（例如target.matches（'input'））{
e、 target.style.border=“纯红2px”；
e、 target.style.boxShadow=“0 5px红色”；
}
});







我不确定自己是否理解正确，但在我看来，问题是在分配模糊事件处理程序时，表单
元素没有定义：

document.addEventListener（“DOMContentLoaded”，function（））{
var textElements=[…document.getElementsByTagName（'input'）；
var listen=函数（项、索引）{
项目.添加的EventListener（'keyup'，功能（ev）{
if（event.target.validity.valid）{
item.style.border=“纯绿2px”；
item.style.boxShadow=“0 5px绿色”；
}否则{
item.style.border=“纯红2px”；
item.style.boxShadow=“0 0 5px红色”；
}
})
}
textElements.forEach（监听）；
});
document.querySelector（'form'）。addEventListener（'blur'，函数（事件）{
event.target.style.border=“纯白2px”；
event.target.style.boxShadow=“0 0 5px白色”；
}，对）