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

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, которые уже делают это; Я рекомендую этот .

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

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

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

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

---

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

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

Answer 2

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

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
    }
}