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

时间:2013-05-15 12:08:30

标签: html5 dom browser browser-cache web-component

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

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

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

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

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

所以我的问题是:如何使用动态生成的<input>来实现Chrome的功能2(或者如何向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 个答案:

答案 0 :(得分:1)

  

我想到的一个工作就是在输入元素的值发生变化时使用window.history.replaceState将其存储在浏览器的历史记录中。但我想知道我是否可以直接挂钩浏览器的自动完成功能,这样我就不必重复调用replaceState。

     

还有另一种解决方法:使用历史记录API在浏览器历史记录中存储动态生成的输入的值(无论何时更改),可以创建一个保持页面状态的静态隐藏<input>字段我们依赖浏览器恢复其价值的能力。

     

除了使用<input>字段上的输入事件来检测要保存在当前会话的历史记录条目中的更改之外,还可以监听pagehide个事件以保存当前值。这可能会更高效。但是,这不适用于在隐藏的输入字段中存储状态,因为页面隐藏事件之后的任何更改都将被丢弃(至少是Chrome)。