Question

我有一个简单的登录表单，包含2个字段，user和pass。我试图让输入中的标签隐藏在焦点上，然后如果没有输入则返回模糊，但密码标签会再次出现在用户名输入中，我无法弄清楚原因。

形式：

<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") .bind("focus.labelFx", function(){ $(this).prev().hide(); }) .bind("blur.labelFx", function(){ $(this).prev()!this.value ? "show" : "hide"; }) .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() { $(this).prev().hide(); }) .blur( function() { if ($(this).val() == '') { $(this).prev().show(); } else { $(this).prev().hide(); } });

Answer 2

我认为你错过了几个“$”并使用了“val（）”

试试这个优化代码......

$(".float-left")
.bind("focus.labelFx", function(){
  $(this).prev().hide();
})
.bind("blur.labelFx", function(){
  $(this).prev()[!$(this).val() ? "show" : "hide"]();
})
.trigger("blur.labelFx");

实施例： http://jsfiddle.net/ZZqFt/

或者您的代码是ID但已修复......

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

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

在这里可以找到...... http://jsfiddle.net/ZZqFt/1/

Jquery - 表单标签

2 个答案: