当在输入字段中键入了一定数量的字符时,如何使元素出现(例如勾号)

How can I make an element appear (for instance a tick) when a certain amount of characters have been typed into an input field?

本文关键字:何使 元素 字符 字段 输入      更新时间:2023-09-26

我创建了一个简单的Javascript验证脚本:

var el = document.getElementById("username");
var el_pwd = document.getElementById("password");
var el2 = document.getElementById("feedback");
var el3 = document.getElementById("ok");
var el4 = document.getElementById("ok2");
function checkUsername() {
var username = el.value;
var password = el_pwd.value;
  if((username.length < 5) & (password.length <= 0)) {
      el2.className = 'warning'; 
      el2.textContent = "Username Not long enough yet..";
      el2.style.color = "red";
      } else {
        el2.textContent = " ";
  }
}
function checkPassword() {
var username = el.value;
var password = el_pwd.value;
   if((username.length >= 5) & (password < 7) ) {
   el2.textContent = "Password MUST be 7 or more characters";
   el2.style.color = "red";
   } else if ((username.length <= 4) & (password.length <= 0))  {
              el2.className = 'warning'; 
              el2.textContent = "Username Not long enough yet..";
              el2.style.color = "red";

   } else {
         el2.textContent = " ";
    }
  }
function usernameOK() {
var username = el.value;
    if(username.length >= 5) {
    el3.style.display="block";
    } else {
      el3.style.display = "none";
   } 
}
function passwordOK() {
var password = el_pwd.value;
if(password.length >= 7) {
el4.style.display="block";
} else {
    el4.style.display = "none";
  }
} 
function feedBack() {
   el2.className = 'tip';
   el2.textContent = "The username MUST be at least 5 characters";
   el2.style.color = "blue";
}


    el.addEventListener("focus", feedBack, false);
    el.addEventListener("blur", checkUsername, false);
    el.addEventListener("blur", usernameOK, false);
    el_pwd.addEventListener("focus", checkPassword, false);
    el_pwd.addEventListener("blur", passwordOK, false);

我想做的是,当用户输入完所需的字符数时,在输入的密码旁边显示一个绿色勾号。

我让它工作,使绿色勾号出现在"模糊"上,但我不确定如何按照我想要的方式进行。

我猜这与keyPress或keyDown有关。

以下是更好地理解我试图实现的目标的jsfiddle:

http://jsfiddle.net/addiosamigo/89zfo94m/6/

很抱歉,它有点笨拙(我在代码审查时问过我能做些什么来使它更具功能性),但我仍在学习。

如有任何意见,我们将不胜感激!

添加监听器时,只需将"blur"替换为"keyup"即可:

el.addEventListener("keyup", checkUsername, false);