首页 文章

自动完成/恢复在导航上动态创建的输入表单字段

提问于
浏览
2

假设我在HTML页面上有一个 <input> 元素 . 当我填写一个值,导航到另一个页面并导航回来时,通常会恢复该值:

1)在Firefox中,由于BFCache,整个页面状态正在恢复:https://developer.mozilla.org/en-US/docs/Working_with_BFCache . (这意味着即使正在恢复正在运行的脚本的状态 . )

2)在Chrome中,快速页面缓存似乎不起作用(因此页面重置为原始状态),但输入字段的值将被保留 .

现在,如果我通过脚本动态添加 <input> 字段,则在Firefox中仍将恢复该值(因为所有内容都已恢复) .

但是,在Chrome中,创建 <input> 字段的Javascript必须再次运行,以便此输入字段显示为引擎的全新内容,这意味着没有值正在恢复 .

所以我的问题是:如何使用动态生成的 <input> 来实现Chrome的功能(或者如何向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.jshttps://github.com/Polymer/CustomElements使用此或polyfill意味着将以编程方式创建大量(输入)元素并为了获得良好的用户体验作为内置元素工作 . )

1 回答

  • 1

    我想到的一个解决方法是每当输入元素的值发生变化时将window.history.replaceState存储在浏览器的历史记录中 . 但我想知道我是否可以直接挂钩浏览器的自动完成功能,这样我就不必重复调用replaceState . 还有另一种解决方法:使用历史API在浏览器历史记录中存储动态生成的输入的值(无论何时更改),可以创建一个静态隐藏的<input>字段来保存页面的状态,我们依赖它浏览器恢复其 Value 的能力 . 不是使用<input>字段上的输入事件来检测要保存在当前会话的历史记录条目中的更改,而是还可以侦听页面隐藏事件以保存当前值 . 这可能会更高效 . 但是,这不适用于在隐藏的输入字段中存储状态,因为页面隐藏事件之后的任何更改都将被丢弃(至少通过Chrome) .

相关问题