因此,在我的网站上,我希望登录字段能够正常工作,如果我单击用户名字段,占位符“用户名”就会消失,然后我可以输入用户名。如果我不输入任何内容并单击离开,我希望占位符重新出现。我遇到的问题是,即使我输入用户名并单击,占位符仍然会返回原位并替换输入的用户名。所以这是我输入的代码来解决这个问题。
$('#user').focus(function(){
$(this).val('');
$(this).css("color","black");
}).blur(function(){
var x = parseInt($(this).val(),10);
if(x==0){
$(this).val('Username');
}
else{
$(this).val('youmessedup') /* I put this here just to see
if it was the conditional that wasn't working, which it was */;
}
$(this).css("color","grey");
});
这是我的 html 代码
<form>
<br />
<input id ="user" type=text value="Username">
</form>
我也会发布密码输入,但仅使用 #pass 的 ID 就完全相同。
我真的不知道我在这里做错了什么。 我的想法是 val 是一种与我认为完全不同的数据类型?我知道 .val() 将获取文本区域内内容的值。是对的吗?如果我说错了请大家指正。
最佳答案
我认为安德里的评论是最好的解决方案,但让我解释一下为什么你的代码不起作用。
问题来自这一行:
var x = parseInt($(this).val(),10);
您正在对可以包含任何字符的字符串使用parseInt
。如果你看documentation ,你会看到
If the first character cannot be converted to a number, parseInt returns NaN.
因此,输入的用户名始终会转换为 NaN
,它不等于 0。因此,您的 x==0
始终会失败。
您想将此行更改为:
var x = $(this).val().length;
这样您就可以测试输入的用户名的长度。
现在的问题是,如果用户再次单击该字段,即使他输入了自己的用户名,它也会删除里面的内容。您可以通过测试该值是否不是“用户名”来防止此问题:
if ($(this).val() == 'Username') {
$(this).val('');
}
您的代码将是:
$('#user').focus(function(){
if ($(this).val() == 'Username') {
$(this).val('');
}
$(this).css("color","black");
}).blur(function(){
var x = $(this).val().length;
if(x==0){
$(this).val('Username');
}
$(this).css("color","grey");
});
我写了一个小jsFiddle here 。希望它有帮助:)
关于jquery - 使用 jQuery 检查 <input type ="text"> 中的文本输入,为什么此代码不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15049926/