[英]How can I make an element appear (for instance a tick) when a certain amount of characters have been typed into an input field?
I have created a simple Javascript Validation script: 我创建了一个简单的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);
What I want do be able to do is make a green tick appear next to the password input when a user finishes typing in the required amount of characters. 我想要做的是当用户完成所需数量的字符输入后,在密码输入旁边显示一个绿色的勾号。
I have it working so that the green tick appears on "blur", but I'm not sure how to go about the way I would like. 我正在使用它,以便绿色的勾号出现在“模糊”上,但是我不确定如何按照自己的方式进行。
I'm guessing it has something to either do with keyPress or keyDown. 我猜想它与keyPress或keyDown有关。
here is the jsfiddle to better understand what I am trying to achieve: 这是jsfiddle,可以更好地了解我要实现的目标:
http://jsfiddle.net/addiosamigo/89zfo94m/6/ http://jsfiddle.net/addiosamigo/89zfo94m/6/
sorry its a bit clunky (I've asked over at code review what I can do to make it more functional) but I am still learning. 抱歉,它有点笨拙(我已经在代码审查中问过我该怎么做才能使其更具功能性),但我仍在学习。
any input would be greatly appreciated! 任何投入将不胜感激!
添加侦听器时,只需用“ keyup”替换“ blur”:
el.addEventListener("keyup", checkUsername, false);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.