크롬 신용 카드 자동 완성 필드 이름 버그/충돌

양식 필드 이름으로 인해 Chrome 자동 완성이 올바르게 작동하지 않는 이유를 아는 사람이 있습니까? Chrome에서 만든 fiddle을 열면 카드 번호 입력란이 올바르게 채워지지만 만료 월 및 연도는 표시되지 않습니다. BirthDate.Mar 선택 목록의 이름을 BirthDate.Foo로 변경하고 BirthDate.YYYY를 BirthDate.Bar로 변경하면; 그런 다음 다시 실행하면 신용 카드 자동 채우기가 예상대로 작동합니다. 이제는 bday 자동 완성을 비활성화하고 해당 값을 "off"로 변경하거나 자동 완성 속성을 완전히 제거하는 것이 좋습니다. 놀랍게도 자동 완성 속성을 제거하거나 해당 필드에서 bday 값을 "off"로 변경하면 주소 자동 완성이 중단됩니다.크롬 신용 카드 자동 완성 필드 이름 버그/충돌

자동 완성 문제 자체에 대한 해결책은 단순히 필드 이름을 변경하는 것입니다. 내가 알고 싶은 것은 왜일까요? 아무도 내가 무의식적으로 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>

출처

2017-12-07 Eric M

가능한 답변 : https://stackoverflow.com/a/41965260, https://developers.google.com/web/fundamentals/design-and-ux/input/forms/#recommended_input_name_and_autocomplete_attribute_values – smdrager

이름의 소문자 버전을 사용하십시오.

나를 위해 이름 속성으로 이름을 사용하면 자동 완성이 필드를 CC로 인식합니다.

이름을 변경하면 매력처럼 작동합니다.

희망이 도움이됩니다.

출처

2017-12-15 11:18:40 gatsby

크롬 신용 카드 자동 완성 필드 이름 버그/충돌

답변

관련 문제