Как «обрабатывать» автозаполнение браузера при вводе текста?

Question

У меня есть входной текстовый логин/пароль, я использую метку, которую я показываю внутри входа, когда вход принимает фокус, ярлык скрыт, когда ввод размывается, если значение не равно "" ярлык отображается снова, он отлично работает с использованием функций focus()/blur(), но как я могу обрабатывать автоматическое заполнение браузера, потому что функция change() не будет работать, поскольку фокус никогда не получается, есть ли способ справиться с этим?

Я не хочу отключать автозаполнение, отключая его, я думаю, он не очень удобен для пользователя.

Я думал использовать таймер, каждый n мс, но я хотел бы использовать лучший метод.

Любые идеи?

Вот мой сценарий:

$('#form-login input.inputbox').focus(
    function() 
    { 
     $('#label-' + $(this).attr('id')).addClass('hidden'); 
    } 
); 

$('#form-login input.inputbox').blur(
    function() 
    { 
     if ($(this).val() == "") 
     { 
      $('#label-' + $(this).attr('id')).removeClass('hidden'); 
     } 
    } 
); 

Answer 1

Есть несколько JQuery плагинов, которые уже делают это; Я рекомендую this one.

Чтобы ответить на ваш вопрос (если вы действительно хотите изобрести колесо), вы говорите об автозаполнении или сохраненных входах?

Если вы говорите об автозаполнении, это произойдет только тогда, когда поле сфокусировано (AFAIK), поэтому вам не нужно беспокоиться.

Если вы говорите о сохраненных входах, я считаю, что они будут заполнены либо до, либо сразу после завершения загрузки страницы, поэтому вы можете проверить загрузку страницы (или через 1 секунду с setTimeout) пустой.

Для этого HTML5 имеет новый placeholder attribute, но браузеры еще не поддерживают его.

---

Кстати, вместо того, чтобы дать каждому ярлыку идентификатор, вы можете использовать следующий селектор:

$('label[for='" + $(this).attr('id') + "']) 

Answer 2

Я сделал это раньше, и использовал window.onload. Я бы рекомендовал создать две функции, которые обрабатывают функциональность «focus» и «blur», которую вы можете вызвать из нескольких мест.

function inputFocus(elem) 
{ 
    // hide the label 
} 

function inputBlur(elem) 
{ 
    // show the label 
} 

window.onload = function() 
{ 
    // get username/password values first 

    if (username.length > 0) { 
     // call inputFocus with jQuery object 
    }    
    if (password.length > 0) { 
     // call inputFocus with jQuery object 
    } 
}