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 - 表單標籤

回答

相關問題