Google chrome 自动填充功能不适用于所有机器

Posted

技术标签:

【中文标题】Google chrome 自动填充功能不适用于所有机器【英文标题】:Google chrome autofill is not working on all machines 【发布时间】:2016-03-09 10:41:47 【问题描述】:

我开发了一个页面,并根据谷歌https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill?hl=en在每个文本输入中放置了自动完成属性,但问题很奇怪。问题在于它在我的机器上正常工作,并且在我的测试环境上部署后它也在那里工作,但只在我的机器上工作,当我在其他团队成员的机器上测试它时它不在那里工作。

我制作的表格与https://greenido.github.io/Product-Site-101/form-cc-example.html 的表格完全相同。

如果您在 chrome 浏览器中对其进行测试,它会为您工作,我还通过高级设置和在那里填写自动填充配置文件将个人信息添加到 chrome 中。

您可以测试我的 plunker 示例来测试并查看问题。 https://embed.plnkr.co/SKkAJ2lHQHElNbyvGrmp/

我已经搜索了很多解决方案,但没有与此相关,比如人们在谈论自动完成关闭、转到谷歌浏览器设置和设置配置文件等。

【问题讨论】:

不工作是怎么回事? 【参考方案1】:

尝试使用<form> 并设置 data-input 属性就可以了。

<form>
<input type="text" required ng-model="vm.Model.Contact.Name" name="Name" id="Name" maxlength="250" data-input="name" autocomplete="name" /> <input type="email" required ng-model="vm.Model.Contact.Email" name="Email" id="Email" maxlength="100" data-input="email" autocomplete="email" /> <input type="text" required ng-model="vm.Model.Contact.Mobile" name="Mobile" id="Mobile" maxlength="30" data-input="tel" autocomplete="tel" />
<input type="text" ng-model="vm.Model.Contact.Telephone" name="Telephone" id="Telephone" maxlength="30" data-input="tel" autocomplete="tel" />
</form>

【讨论】:

【参考方案2】:

在您的input 标记中,name 属性以大写字母开头 尝试将其更改为小写,它应该可以工作

你的代码:

Name: <input type="text" required="" ng-model="vm.Model.Contact.Name" name="Name" id="Name" maxlength="250" autocomplete="name"> <br> <br>
Email: <input type="email" required="" ng-model="vm.Model.Contact.Email" name="Email" id="Email" maxlength="100" autocomplete="email"> <br> <br>
Mobile: <input type="text" required="" ng-model="vm.Model.Contact.Mobile" name="Mobile" id="Mobile" maxlength="30" autocomplete="tel"> <br> <br>
Phone: <input type="text" ng-model="vm.Model.Contact.Telephone" name="Telephone" id="Telephone" maxlength="30" autocomplete="tel"> <br> <br>

修复代码

Name: <input type="text" required="" ng-model="vm.Model.Contact.Name" name="name" id="Name" maxlength="250" autocomplete="name"> <br> <br>
Email: <input type="email" required="" ng-model="vm.Model.Contact.Email" name="email" id="Email" maxlength="100" autocomplete="email"> <br> <br>
Mobile: <input type="text" required="" ng-model="vm.Model.Contact.Mobile" name="mobile" id="Mobile" maxlength="30" autocomplete="tel"> <br> <br>
Phone: <input type="text" ng-model="vm.Model.Contact.Telephone" name="telephone" id="Telephone" maxlength="30" autocomplete="tel"> <br> <br>

【讨论】:

您好 Zamboney,感谢您的回答,名称应该以大写开头并不重要,因为功能已经使用这个大写。问题是我和你还没有发现的其他问题。我已经在其他机器上测试了您的答案,但效果不佳。 你可以在你添加的链接中看到属性名是小写的 你好 Zamboney,我找到了解决这个问题的方法,chrome 自动填充需要
元素,属性 autocomplete='on' 然后它在所有测试机器上都可以正常工作。

以上是关于Google chrome 自动填充功能不适用于所有机器的主要内容,如果未能解决你的问题,请参考以下文章

禁用用户名和密码的chrome自动填充不适用于较新版本

ASP.NET 为信用卡字段禁用 Chrome 自动填充

iOS 11 自动填充密码功能不适用于英语以外的其他语言

sqPaymentForm 不适用于 IOS 自动填充

HTML 5 自动播放 Google Chrome Android 未播放

Chrome 远程调试不适用于 IP