Автозаполнение / восстановление полей формы ввода, которые создаются динамически при навигации

Предположим, у меня есть элемент <input> на странице HTML. Когда я ввожу значение, перехожу на другую страницу и возвращаюсь назад, это значение обычно восстанавливается:

1) В Firefox все состояние страницы восстанавливается из-за BFCache: https://developer.mozilla.org/en-US/docs/Working_with_BFCache. (Это означает, что восстанавливается даже состояние запущенного скрипта.)

2) В Chrome кеш быстрой страницы не работает (поэтому страница сбрасывается в исходное состояние), но значения полей ввода сохраняются.

Теперь, если я добавлю поле <input> динамически с помощью сценария, в Firefox значение все равно будет восстановлено (из-за того, что все восстанавливается).

В Chrome, однако, Javascript для создания поля <input> должен запускаться снова, чтобы это поле ввода отображалось как совершенно новое для движка, что означает, что никакое значение не восстанавливается.

Итак, мой вопрос: как реализовать функциональность Chrome 2) с динамически генерируемыми <input>s (или как дать Chrome подсказку об идентичности поля ввода).

(Одна из причин, почему меня интересует все это, - это предлагаемые настраиваемые элементы: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html. Использование этого или полифиллов на https://github.com/mozilla/web-components/blob/master/src/document.register.js или https://github.com/Polymer/CustomElements означает, что один собирается создать множество (входных) элементов программно, и для удобства пользователей они должны работать как встроенные элементы.)


person Marc    schedule 15.05.2013    source источник


Ответы (1)


Я подумал о том, чтобы использовать window.history.replaceState всякий раз, когда значение элемента ввода изменяется, чтобы сохранить его в истории браузера. Но мне интересно, могу ли я напрямую подключиться к функции автозаполнения браузера, чтобы мне не приходилось повторно вызывать replaceState.

Существует еще один обходной путь: вместо сохранения значения (всякий раз, когда оно изменяется) динамически сгенерированного ввода в истории браузера с помощью API истории, можно создать одно статическое скрытое поле <input>, которое содержит состояние страницы и для которого мы полагаемся на способность браузера восстановить свою ценность.

Вместо использования события ввода в полях <input> для обнаружения изменений, которые должны быть сохранены в записи истории текущего сеанса, можно также прослушивать события pagehide для сохранения текущих значений. Это может быть немного более производительным. Однако это не работает с сохранением состояния в скрытых полях ввода, потому что любые изменения после события pagehide отбрасываются (по крайней мере, Chrome).

person Community    schedule 14.04.2014