使用 jQuery 检查<输入类型= "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>

我也会发布密码输入，但 ID 为 #pass 是完全相同的。

我

真的不知道我在这里做错了什么。我在想的是 val 是一种完全不同的数据类型，我认为它是？我知道 .val(( 会抓取文本区域内内容的值。是吗？如果我错了，请纠正我。

Answer 1

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

问题来自这一行：

var x = parseInt($(this).val(),10);

您正在对可以包含任何字符的字符串使用parseInt。如果您查看文档，您会发现

如果第一个字符无法转换为数字，parseInt 将返回 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。希望对:)有所帮助