Question

document.getElementById("txt").addEventListener("focus", function(){
    if(document.getElementById("txt").value.valid==true){
    this.style.border="solid green 2px"  
    }else{
    this.style.border="solid red 2px"  
    }
});

document.getElementById("pwd").addEventListener("focus", function(){
    this.style.border="solid green 2px"  });

document.getElementById("txt").addEventListener("blur", function(){
    this.style.border="solid white 2px";
    this.style.boxShadow="0 0 5px white";
  });

document.getElementById("pwd").addEventListener("blur", function(){
    this.style.border="solid white 2px";
    this.style.boxShadow="0 0 5px white";
});

<!DOCTYPE html>
<html>
<body>

<form id="form">
    <input type="text" minlength="6" maxlength="10" placeholder="User name" id="txt" required>
    <br>
    <br>
    <input type="password" minlength="8" maxlength="15" placeholder="Password" id="pwd" required>
    <br><br>
    <input type="submit" value="Submit">
</form>

<script src="script 2.js"></script>
</body>
</html>

我需要..

使用JavaScript在用户名和密码输入元素上添加“输入”事件侦听器。

为“输入”事件创建事件处理程序，该事件处理程序将执行以下操作：使用事件对象的target属性获取激活此事件的输入元素。

通过使用event.target对象（event.target.validity.valid）的validity属性检查输入对该元素是否有效。如果有效，

使用event.target对象（event.target.style）的style属性更改输入元素的样式。

like this image

Answer 1

当输入更改时，使用"inputTypes": [ { "column":0, "type":"text", "options":null }, { "column":1, "type": "list", "options":[ { "value": "1", "display": "Beaty" }, { "value": "2", "display": "Doe" }, { "value": "3", "display": "Dirt" } ] }来执行某些操作。

.addEventListener("input", function() { });

var txt = document.getElementById("txt");
var pwd = document.getElementById("pwd");

txt.addEventListener("input", function() {
  if (this.validity.valid) {
    this.style.border = "2px solid green";
  }
});

pwd.addEventListener("input", function() {
  if (this.validity.valid) {
    this.style.border = "2px solid red";
  }
});

txt.addEventListener("focus", function() {
  if (txt.value.valid == true) {
    this.style.border = "solid green 2px"
  } else {
    this.style.border = "solid red 2px"
  }
});

pwd.addEventListener("focus", function() {
  this.style.border = "solid green 2px"
});

txt.addEventListener("blur", function() {
  this.style.border = "solid white 2px";
  this.style.boxShadow = "0 0 5px white";
});

txt.addEventListener("blur", function() {
  this.style.border = "solid white 2px";
  this.style.boxShadow = "0 0 5px white";
});

Answer 2

Aniket G.说的对，您需要输入eventListener。您不需要拥有focus和blur事件。而且，您不需要一个个地附加事件监听器，只需创建一个元素数组并循环到addEventListener

var txt = document.getElementById("txt");
var pwd = document.getElementById("pwd");

[txt,pwd].forEach(elm => {
   elm.addEventListener("input", function() {
    this.style.border = (this.validity.valid) ? "2px solid red":"solid green 2px";
  });
})

<!DOCTYPE html>
<html>
<body>

<form id="form">
    <input type="text" minlength="6" maxlength="10" placeholder="User name" id="txt" required>
    <br>
    <br>
    <input type="password" minlength="8" maxlength="15" placeholder="Password" id="pwd" required>
    <br><br>
    <input type="submit" value="Submit">
</form>

<script src="script 2.js"></script>
</body>
</html>

如何使用JavaScript在用户名和密码输入元素上添加“输入”事件侦听器？

2 个答案: