Как привязать к браузеру изменение поля ввода? (JQuery)

Question

Пожалуйста, посмотрите на это: http://jsfiddle.net/sduBQ/1/

HTML:

<form action="login.php" method="post" id="login-form">
    <div class="field">
        <input name="email" id="email" type="text" class="text-input" value="E-mail" />
    </div>

    <div class="field">
        <input name="code" id="code" type="password" class="text-input" />
        <div id='codetip'>Access Code</div>
        <label class="error" for="code" id="code_error"></label>
    </div>
    <br />
    <div class="container">
        <a id="submit" class="link-2">Access</a>
     </div>
</form>

CSS:

a {
    border: solid 1px #777;
    padding:5px;
}
#codetip {
    position:absolute;
    margin-top:-20px;
    margin-left:5px;
}

Javascript:

$('#email').focus(function(){
    if($(this).val()=='E-mail'){$(this).val('');}
});
$('#email').blur(function(){
    if($(this).val()==''){$(this).val('E-mail');}
});

$('#code').focus(function(){
    $('#codetip').hide();
});
$('#code').blur(function(){
    if($(this).val()==''){$('#codetip').show();}
});

$('#codetip').click(function(){
    $(this).hide();
    $('#code').focus();
});

$('#submit').click(function(){
    $(this).submit();
});

Проблема в том, что, по крайней мере, в Chrome (еще не пробовали другие браузеры), когда Chrome Password Manager сохраняет ваш пароль и заполняет его для вас при выборе адреса электронной почты.Я использую jquery, чтобы скрыть / показать div поверх поля ввода пароля в качестве метки, скрывая этот div, когда пользователь нажимает на поле пароля (как видно из приведенного выше кода jsfiddle).Мне нужно знать, как скрыть этот div, когда Chrome предварительно заполняет поле пароля ...

Answer 1

Я сам с этим не сталкивался, но, похоже, это общая проблема, основанная на нескольких быстрых поисках в Google.

• Событие изменения ввода автозаполнения захвата FireFox
• http://bugs.jquery.com/ticket/7830

Один простой способ взломать, который вы могли бы сделать, это настроить некоторый код, который запускается каждую секунду или две с помощью setInterval, и проверять, имеет ли поле значение.

Как то так ...

var code = $('#code');
var codeTip = $('#codetip');
var interval = setInterval(function(){
    if (code.val()!=''){
        codeTip.hide();
        clearInterval(interval);
    }
}, 1000);

Answer 2

У меня была такая же проблема. Ни одно из найденных мной решений не сработало. Я закончил с этим:

Если не имеет значения, что у ваших полей ввода есть фон, я обработал это только в CSS.

jsfiddle

Я просто дал .inputPlaceholder { z-index: -1; }, чтобы он выровнялся за полем ввода, а затем установил input { background: transparent; }, чтобы вы могли видеть div за ним.

Стиль Google по умолчанию -webkit-autofill имеет желтый фон, поэтому он просто скрывает ваш заполнитель. Нет необходимости возиться с пользовательскими плагинами / событиями / setIntervals.