jquery - 使用 jQuery 检查 <input type ="text"> 中的文本输入，为什么此代码不起作用？

Question

因此，在我的网站上，我希望登录字段能够正常工作，如果我单击用户名字段，占位符“用户名”就会消失，然后我可以输入用户名。如果我不输入任何内容并单击离开，我希望占位符重新出现。我遇到的问题是，即使我输入用户名并单击，占位符仍然会返回原位并替换输入的用户名。所以这是我输入的代码来解决这个问题。

$('#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() 将获取文本区域内内容的值。是对的吗？如果我说错了请大家指正。

Answer 1

我认为安德里的评论是最好的解决方案，但让我解释一下为什么你的代码不起作用。

问题来自这一行:

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 。希望它有帮助:)