jquery - 表单标签

我有一个简单的登录表单，有2个字段，用户名和密码。我试图让输入内的标签隐藏在焦点上，如果没有输入任何内容，则会返回模糊状态，但密码标签不断显示在用户名输入中，我找不到原因。jquery - 表单标签

形式：

<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");

来源

2011-02-11 We' re All Scholars

您可以创建一个完整的jsFiddle.net例如，使用CSS。 – 2011-02-11 09:22:10

你可以试试

$("#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/

采取或尝试这个代码，我甲肝echanged你

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

来源

2011-02-11 09:29:56

这是我开始使用的代码。它给了我上面描述的错误，所以我尝试使用class和id选择器来更具体地定义目标，而不是.prev和.this，它给了我完全相同的错误。 – 2011-02-11 09:53:09

我认为你缺少一对夫妇的 “$” 和使用 “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/

来源

2011-02-11 15:29:01 digiguru

jquery - 表单标签

回答

相关问题