Jquery - форма ярлыков

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

Я думаю, что вам не хватает пары "$" и использования "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/

Или вы код с идентификаторами, но исправлены ...

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

Answer 2

Вы можете попробовать

$("#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");</p> <p> взято отсюда 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> });