Chrome信用卡自动填充字段名称错误/冲突

Question

有人知道为什么表单字段名称会导致Chrome的Autofill停止正确工作吗？如果您打开我在Chrome中创建的小提琴，您会注意到卡号字段正确填充了，但没有到期的月份和年度。如果您将出生日期的名称更改为birthdate.foo和birthdate.yyyy to birthdate.bar;然后重新运行，信用卡自动填充按预期运行。现在，一个明显的建议是简单地禁用bday-autofill，然后将这些值更改为"关闭"或完全删除自动完成属性。惊人的是，将自动完成属性删除或将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>

Answer 1

使用您的名字的低案例版本。

对我来说，使用名称作为名称属性不起作用，Autofill将字段识别为CC !!

如果我将其更改为名称，则像魅力一样工作。

希望这会有所帮助！