尝试创建一个模糊事件，该事件使用事件对象的目标属性来获取事件处于事件状态的输入元素。我在最底部添加了我认为正确的代码，但在不搞砸第一部分的情况下努力实现它。
还试图将 <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>
最佳答案
我不确定我是否理解正确，但在我看来，问题是在分配 blur 时未定义 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.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>关于javascript - 为模糊事件创建事件处理程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55013945/