Tự động điền thẻ tín dụng Chrome không được kích hoạt

Question

Tôi đã làm theo lời khuyên được đưa ra trong this other Stack Overflow post và sử dụng mẫu được tìm thấy trong the list of regexes used by Chrome, nhưng vì một lý do nào đó Chrome vẫn không phát hiện thấy trường của tôi là trường thẻ tín dụng.

Safari phát hiện nó tốt.

Đây là HTML đầu vào, như thể hiện bởi trình theo dõi web:

<input class="control" id="card_number" type="tel" name="card_number" 
    value="" autocorrect="off" spellcheck="off" autocapitalize="off" 
    placeholder="Card number" data-reactid=".0.1.1.0.0.5.0.0" 
    x-autocompletetype="cc-number" autocompletetype="cc-number"> 

Vâng, như bạn có thể nhìn thấy từ data-reactid, Tôi đang sử dụng phản ứng. Có thể là có cái gì đó để làm với nó. Ai biết!

Tôi đã thiết lập trang thử nghiệm để những người khác có thể chơi với trang đó. Bạn có thể truy cập https://entire.life/payment-form-test trong Safari và (nếu bạn đã bật tự động điền và thẻ tín dụng được lưu vào nó), nó sẽ bật lên. Nếu bạn truy cập vào Chrome, Chrome sẽ không bật tùy chọn tự động điền. Ngay cả sau khi nhập chữ cái đầu tiên của thẻ của bạn.

Mã này là mã nguồn mở. Bạn có thể xem nguồn của trang /payment-form-testhere.

Answer 1

Nó sẽ làm việc nếu bạn thêm các thuộc tính sau đây để các yếu tố đầu vào tương ứng:

• autocomplete="cc-number"
• autocomplete="cc-exp"
• autocomplete="cc-csc"

Ngoài ra, tôi nhận thấy rằng Chrome sẽ không tự động hoàn tất nếu một trong các trường cc bị thiếu.

Bạn có thể chơi xung quanh đây - https://jsfiddle.net/q4gz33dg/2/

Answer 2

Đặt tên cho các trường hết hạn card_expiry_month và card_expiry_year. Tôi không chắc tại sao tên hiện tại của bạn không kích hoạt regex, nhưng việc thay đổi tên dường như hoạt động.

http://jsfiddle.net/7b6xtns7/ (đó là một chút lộn xộn vì nó không trả lại)

Edit: Hình như đặt hàng đã làm với nó quá. Nếu điều đó không làm việc cố gắng đưa các tháng/ngày ngay sau khi lĩnh vực nhập số

http://jsfiddle.net/c86Lmo0L/

Answer 3

Câu trả lời được chấp nhận là rất tốt, nghĩ rằng tôi chỉ muốn kêu vang trong với một số tài liệu và một lưu ý về React (gắn thẻ cho câu hỏi này) ..

Phản ứng đòi hỏi bạn chuyển thuộc tính là autoComplete="cc-number" (lưu ý camelCase), nếu không nó sẽ mặc định là autocomplete="off".

Thông tin thêm:

• Phản ứng thuộc tính: https://facebook.github.io/react/docs/tags-and-attributes.html
• ví dụ hữu ích: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
• https://html.spec.whatwg.org/multipage/forms.html#autofill