Chrome 信用卡自动填充字段名称错误/冲突
Posted
技术标签:
【中文标题】Chrome 信用卡自动填充字段名称错误/冲突【英文标题】:Chrome Credit Card Autofill Field Name Bug/Conflict 【发布时间】:2018-05-21 19:29:10 【问题描述】:有谁知道为什么表单字段名称会导致 Chrome 的自动填充功能停止正常工作?如果您打开我在 Chrome 中创建的fiddle,您会注意到卡号字段正确填充,但没有到期月份和年份。如果将 BirthDate.MM 选择列表的名称更改为 BirthDate.Foo 并将 BirthDate.YYYY 更改为 BirthDate.Bar;然后重新运行,信用卡自动填充按预期工作。现在,一个明显的建议是简单地禁用 bday-autofill 并将这些值更改为“off”或完全删除 autocomplete 属性。令人惊讶的是,删除自动完成属性或将这些字段上的 bday- 值更改为“关闭”会破坏地址自动填充!!!
自动填充问题本身的解决方案就是更改字段名称。我想知道的是为什么?谁能解释一下我是如何无意中戳到 Chrome 的字段名称嗅探功能的?
<fieldset>
<legend>Payment Information</legend>
<div><input autocomplete="cc-number" id="CreditCard_CardNumber" maxlength="16" name="CreditCard.CardNumber" pattern="\d*" required="" type="text" placeholder="Card Number" value="" /></div>
<div>
<label for="CreditCard_ExpirationMonth">Expires:</label>
<select autocomplete="cc-exp-month" id="cardExpirationMonth" name="CreditCard.ExpirationMonth" required="">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select autocomplete="cc-exp-year" id="cardExpirationYear" name="CreditCard.ExpirationYear" required="">
<option value="">Year</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
<option value="2034">2034</option>
<option value="2035">2035</option>
<option value="2036">2036</option>
<option value="2037">2037</option>
</select>
</div>
</fieldset>
【问题讨论】:
可能的答案:***.com/a/41965260, developers.google.com/web/fundamentals/design-and-ux/input/… 【参考方案1】:使用您的姓名的小写版本。
对我来说,使用名称作为名称属性不起作用,自动填充将字段识别为 CC !!
如果我将其更改为 name ,它就像一个魅力。
希望这会有所帮助!
【讨论】:
以上是关于Chrome 信用卡自动填充字段名称错误/冲突的主要内容,如果未能解决你的问题,请参考以下文章