2

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

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

4

1 回答 1

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 。希望能帮助到你 ：）

于 2013-02-24T13:28:32.737 回答