我正在研究基本的 javascript 表单验证
var seUSer = document.getElementById("seUSername");
seUser.addEventListener("blur", validator(seUsername), false);
function validator (input) {
if (input.value == "") {
input.style.color="#fff";
} else {
input.style.color="#f0f0f0";
}
}
在这种情况下,如果在用户执行“模糊”操作后它的值为空,我希望具体输入改变颜色,所以点击离开,但它在页面加载时改变颜色,即没有用户做任何事情,是“默认情况下对输入进行模糊”操作?或者什么是处理这种情况的正确方法。
这是 jsFiddle:http://jsfiddle.net/Z4K6D/
如您所见,字段从一开始就是红色的,但只有当用户取消聚焦并且其中没有任何内容时,它才应该是红色的。
最佳答案
这段代码:
loginUsername.addEventListener("blur", validateForm(loginUsername), false);
正在调用 validateForm
并将它的返回值传递给addEventListener
,与foo(bar())
调用 bar
并将其返回值传递给 foo
。您没有将其设置为事件处理程序。
要将一个函数设置为事件处理程序,您不需要调用它,您只需传递一个对它的引用。因为你想给你的函数一个参数,所以在这种情况下你会在它周围包装一个函数:
loginUsername.addEventListener("blur", function() {
validateForm(loginUsername);
}, false);
或者,让您的 validateForm
函数使用 this
而不是 input
参数:
document.getElementById("loginUsername").addEventListener("blur", validateForm, false);
// Note no (), we're not calling it ------------------------------------------^
function validateForm () {
if (this.value == "") {
this.style.background="#f26060";
} else {
this.style.background="#fff";
}
}
...因为在通过 addEventListener
连接的事件处理程序中,this
设置为您连接事件的元素。
关于javascript - 奇怪的 addEventListener 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22273636/