Событие триггера, когда автозаполнение завершает ввод пароля

Question

У меня есть простая форма для входа в систему, и я хочу отображать заголовок в полях, пока они пусты. Проблема состояла в том, что тип пароля не может быть изменен JS.

Итак, я взял второй ввод, который заменяется полем пароля, когда поле пароля пусто.

Проблема в том, что если пользователь вводит имя пользователя и браузер автоматически заполняет поле пароля, поле пароля не будет отображаться ... Что я могу сделать?

Мой HTML,

<form name="login" method="post" action="/login" class="dialog form">
    <input type="submit" value="GO" />
    <div class="field">
        <input type="text" name="username" class="required" title="Username"/>
    </div>
    <div class="field">
        <input type="password" name="password" class="required"  />
        <input type="text" value="Password" class="password-title" />
    </div>
    <p class="clear">&nbsp;</p>
</form>

Мой JS (требуется jQuery):

       $("input[type=text]").each(function(){
           var input = $(this);

           if(input.val() == "") input.val(input.attr('title'));
           input.bind('click', function(){
               $(this).focus();
               if($(this).val() == $(this).attr('title')) $(this).val("");
           });
           input.bind('blur', function(){               
                if($(this).val() == "") $(this).val($(this).attr('title'));
           });

        });

        $("input[type=password]").each(function(){
            var input = $(this);
            var title = input.next('.password-title');

            if(input.val() == "" && title.length > 0){
                title.show();
                input.hide();
            }

            title.bind('click', function(){
                title.hide();
                input.show();
                input.focus();
            });

            input.bind('blur', function(){
                if($(this).val() == ""){
                    title.show();
                    input.hide();
                }
            });

            input.bind('DOMAutoComplete', function(){
                alert("dafuq"); //does not work (tested in Chromeium)
            });

Спасибо за помощь!

Answer 1

Я бы рекомендовал вместо этого использовать атрибут-заполнитель элемента ввода.Подробнее об этом: здесь .

Answer 2

input.bind('change', function(){
  title.hide();
  input.show();
  input.focus();
});