Chrome 何时在网页中自动填充?
我有一位客户希望他们的 UI 在表单中显示字段名称(用户名字段显示“用户名”,密码字段显示“密码”等)。由于表单使用密码类型 (通常显示点),因此我必须通过用包含措辞的 div 覆盖字段来模拟将数据填充到字段中。
为了识别自动填充,我编写了一些 JavaScript 来检查该字段是否已填充并相应地执行操作(隐藏或显示措辞)。
据我所知,Chrome 是唯一一个不稳定的浏览器。它似乎并不关心是否有自动填充数据,并且措辞总是覆盖自动填充数据(表面上是因为隐藏功能没有被触发)。
我啰嗦的问题是 Chrome 何时在渲染过程中自动填充数据?它会等到 Javascript 也完成吗?有什么方法可以检查自动填充数据是否占用了 Chrome 中的某个字段?
I have a customer who wanted their UI to display field names in a form (username field says "username", password field says "password", etc.). Since the form uses a password type <input>
(which normally displays dots), I had to mock filling data into the fields by overlaying them with divs that contained the verbiage.
To recognize autofill, I wrote some Javascript that checks to see if the field is filled and acts accordingly (either hiding or showing the verbiage).
As far as I can tell, Chrome is the only browser that goes wonky. It doesn't seem to care if there's autofill data or not, and the verbiage always overlays the autofill data (ostensibly because the hide
functionality isn't being triggered).
My long-winded question is When does Chrome autofill data in the rendering process? Does it wait until Javascript has finished as well? Is there any way for me to check if autofill data is occupying a field in Chrome?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
一个简单的解决方法是使用
placeholder
属性,WebKit和Firefox支持。这需要额外的功能检测,但随后您只需在非 Chrome 中实现模拟覆盖即可。深入了解 HTML5 说明
A simple workaround would be to use the
placeholder
attribute of HTML5, supported by WebKit and Firefox. It would take an extra bit of feature detection, but then you’d only have to implement the mock overlay in non-Chrome.Dive Into HTML5 explanation
我决定将侦听器附加到激活包含表单的模式的事件。不用说,这是一个只适用于我的特定情况的解决方案。我不认为这是一个答案,但我将其发布在这里可能是为了给其他寻找解决方案的人提供解决方法。
I decided to attach a listener to an event that activated the modal that contained the forms. Needless to say, this is a solution that would only work in my particular circumstances. I don't consider this an answer, but I'm posting it here to possibly give others looking for a solution a workaround.