html - Chrome 自动完成功能认为我的 "firstName"字段是信用卡

标签 html reactjs google-chrome credit-card autosuggest

该问题已在其他地方问过,但没有回答。
谷歌浏览器认为我的输入
<input name="firstName" id="firstName" type="text" placeholder="John" font-size="16" class="sc-fznKkj XyZMK">
是一张信用卡,如自动完成字段检查器(实验标志 thingy)和提供已保存信用卡的自动完成所示。

它也在 lastName 字段和另一个数字类型字段以另一种形式执行此操作。

我不明白的是,它只是在我们的开发环境中按预期工作,并且只在暂存中变得疯狂(两者几乎都是相同的部署过程,相同的 s3 + cloudfront 托管,相同构建的相同代码)。

有什么线索吗?

它变得更奇怪:将 name 字段更改为 first-name 而不是 firstName 修复了它。我不需要更改两个输入名称,只有第一个更改。但是我应该可以随意命名我的领域,不是吗?

最佳答案

在 HTML 表单中,autocomplete 属性用于告诉浏览器应该将哪种类型的数据输入到特定的输入中。
(更多信息在 MDN web docs 。)
例如,对于名字,您应该使用 autocomplete="given-name" ,对于姓氏,请使用 autocomplete="family-name"
将这些属性添加到被错误识别的输入中应该可以解决您的问题。

至于为什么有些输入没有 autocomplete 属性但仍然可以正确识别:当没有找到 autocomplete 属性时,浏览器会尝试“智能地”决定应该将什么放入该字段。
为此,最常用的是 name 属性。例如,如果是 usernamepassword,浏览器可能会识别这些词,因为它们是非常常见的输入描述。如果是 myinput6 ,则浏览器将无法识别任何内容。
在您的情况下,浏览器似乎识别了 name="first-name" ,但无法识别略有不同的 name="firstName" 。但是,正如您所说,您应该能够为 name 属性赋予您想要的任何值,为此,您应该使用 autocomplete 属性。

关于html - Chrome 自动完成功能认为我的 "firstName"字段是信用卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61777916/

相关文章:

selenium - 哪个 ChromeDriver 版本与哪个 Chrome 浏览器版本兼容?

html - 图片样式 "object-fit: contain"在 Google Chrome 版本 72.0.3626.109 中损坏

javascript - 想要在文本中插入选定的值

reactjs - Gatsby.js : gatsby-plugin-google-analytics only firing events in production build

javascript - 如何使用 jQuery 根据这些 HTML 元素的总高度将所有 HTML 元素包装在 DIV 中?

javascript - 为什么我的数组是空的? React 读取 json api

javascript - 强制客户端重新加载我的bundle.js

javascript - Chrome svg 渲染问题 - d3 - 折线

html - CSS 多浏览器中的 Aqua 按钮

javascript - 使用 JavaScript 访问 HTML 中的标签