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

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

问题来自这一行：

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

您在包含任何字符的字符串上使用parseInt。如果您查看documentation，您会看到

如果第一个字符无法转换为数字，则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 here。希望它有所帮助：）

使用jQuery检查<input type =“text”/>中的文本输入，为什么这段代码不起作用？

1 个答案: