当在输入字段中键入了一定数量的字符时,如何使元素出现(例如勾号)
How can I make an element appear (for instance a tick) when a certain amount of characters have been typed into an input field?
我创建了一个简单的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);
相关文章:
- 如何使元素在可拖动元素内可单击
- 使元素在iframe中可拖动
- 如何使元素在按下按钮时不会失去焦点
- 使元素可见并在单击时隐藏
- 如何使用.animate使元素不被爬网
- Css-是否可以在调整屏幕大小时使元素移动,以使其适合屏幕
- 缩放时使元素适应视口宽度
- 使元素单独更改颜色
- 如何创建javascript执行器,使元素在selenium webdriver中可见
- 如何使元素在硒网络驱动程序中可见
- 使元素可沿对角线/在路径上拖动
- 我将如何能够使元素为我的网站建设者生成代码
- 使元素显示在最小屏幕大小上
- 如何使元素的宽度和高度为页面(文档)的100%,而不仅仅是窗口(浏览器)
- SVG掩码总是使元素不可见
- 用于使元素可点击的角度指令
- 使用 jQuery 调整宽度,使 p 元素高 4 行
- Javascript - 如何使用“href”作为变量使“a”元素作为链接
- 当有最小宽度时,如何使元素中心(水平)具有固定位置
- 下拉列表使元素移动