Jquery - 表单标签

Question

我有一个简单的登录表单，有 2 个字段:用户和密码。我试图让输入中的标签隐藏在焦点上，如果没有输入任何内容，则返回模糊状态，但密码标签不断重新出现在用户名输入中，我不明白为什么。

表格:

<form method="post" id="nav-login-form" class="float-right" action="">
    <fieldset>
        <div>
            <label id="login-user-label" for="user">user</label>
            <input id="login-user" class="float-left" type="text" name="user" />
        </div>
        <div >
            <label id="login-pass-label" for="pass">pass</label>
            <input id="login-pass" class="float-left" type="password" name="pass" />
        </div>
        <div>
            <input class="button float-left" type="submit" name="submit" value="login" />
        </div>
    </fieldset>
</form>

JavaScript:

$("#login-user")
.bind("focus.labelFx", function(){
  $("#login-user-label").hide();
})
.bind("blur.labelFx", function(){
  $("#login-user-label")[!("#login-user").value ? "show" : "hide"]();
})
.trigger("blur.labelFx");

$("#login-pass")
.bind("focus.labelFx", function(){
  $("#login-pass-label").hide();
})
.bind("blur.labelFx", function(){
  $("#login-pass-label")[!("#login-pass").value ? "show" : "hide"]();
})
.trigger("blur.labelFx");

Answer 1

你可以试试

$("#nav-login-form input")<br/> .bind("focus.labelFx", function(){ $(this).prev().hide();<br/> })<br/> .bind("blur.labelFx", function(){<br/> $(this).prev()!this.value ? "show" : "hide";<br/> })<br/> .trigger("blur.labelFx");

取自这里http://blog.stannard.net.au/2011/01/07/creating-a-form-with-labels-inside-text-fields-using-jquery/

或者尝试我为您更改的代码

$("form.login input").focus( function()<br/> { $(this).prev().hide(); })<br/> .blur( function()<br/> { if ($(this).val() == '') {<br/> $(this).prev().show();<br/> } else {<br/> $(this).prev().hide();<br/> }<br/> });