Después de investigar un poco con un navegador iOS8 y emulación de Chrome, lo descubrí parcialmente. Conozco algunas soluciones, pero no estoy seguro de si hay otras formas de hacerlo. Deberás agradecer a Apple por la sorprendente falta de documentación sobre esto.

Actualmente, Netflix / Amazon tiene un escaneo de tarjeta de crédito funcionando correctamente. Así que emulé un agente de usuario iOS8 en mi navegador Chrome e inspeccioné el marcado de su campo de número de tarjeta de crédito. Aquí está Netflix:

Y aquí está Amazon’s:

En ese momento jugué con un formulario servido sobre HTTPS sobre el que tenía control y comencé a establecer atributos para ver qué pasaría. A continuación, “funciona” significa “exploración de tarjeta activada con éxito” y “no funciona” significa “no activó la exploración de tarjeta”:

• name="addCreditCardNumber" => funciona
• name="cardNumber" => funciona
• name="cardnumber" => funciona
• class="cardNumber" => no funciona
• type="cardNumber" => no funciona
• id="cardNumber" , id="creditCardNumber" , id="creditCardMonth" , id="creditCardYear" => funciona

Dado que el atributo de name maneja los datos y podría afectar la forma en que funciona el procesamiento de formularios del lado del servidor, recomiendo activar el escaneo de la tarjeta de crédito configurando su id entrada en cardNumber .

Me gustaría vincular a la documentación pertinente … pero ¡oye! No hay ninguno (al menos, no que yo sepa)

Creo que tu mejor opción es utilizar HTML5 Autocompletar Tipos en tus entradas.

Siga los tipos relacionados con la tarjeta de crédito, y la mayoría de los navegadores modernos reconocerán automáticamente estos campos, incluyendo Mobile Safari y la función “Escanear tarjeta de crédito”. La ventaja es que siempre obtendrás el teclado correcto en dispositivos móviles también.

Ejemplo (observe autocomplete , x-autocompletetype y atributos de pattern ):

También escribí una publicación de blog relacionada sobre este tema y construí un Cheatsheet HTML5 Autocompletar .

Además de la respuesta de Arnaud Brousseau , una búsqueda de “número de tarjeta” en los archivos del simulador de iOS produce este archivo:

/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator.sdk/System/Library/PrivateFrameworks/SafariShared.framework/SafariShared

Una ejecución rápida de strings de texto revela estas cadenas que sin duda se utilizan para hacer coincidir campos potenciales:

 card number cardnumber cardnum ccnum ccnumber cc num creditcardnumber credit card number newcreditcardnumber new credit card creditcardno credit card no card# card # cvc2 cvv2 ccv2 security code card verification name on credit card name on card nameoncard cardholder card holder name des karteninhabers card type cardtype cc type cctype payment type expiration date expirationdate expdate 

y un poco más:

 month date m date mo year date y date yr 

No se puede ver (con este enfoque ingenuo) ninguna referencia a qué atributos ( id , name , placeholder …) u otros metadatos (¿etiqueta quizás?) Se comparan realmente con esta lista. Además, con la excepción de “name des karteninhabers”, esto es realmente muy orientado al inglés, eso es bastante inusual para Apple en mi humilde opinión.

Gracias a @barbazoo, la opción Escanear Tarjeta de Crédito estará disponible en https con un certificado válido (no autofirmado).

Para los campos de caducidad, según la respuesta de Arnaud, encontré que los campos de caducidad se reconocerían desde cardExpirationYear y cardExpirationMonth en el atributo id .

Esto funcionó cuando el año y el mes son entradas de texto regulares con los ID apropiados. El mes se completa con un número de 2 dígitos y el año con un número de 4 dígitos.

En una prueba rápida con las tags , descubrí que también rellenaba el mes y el año correctos.

   01 02 ... 11 12   2014 2015 ... 2024 2025  

No sé qué otros valores funcionarán en las tags de opciones.

No se trata de cuándo , se trata de cómo podemos habilitar esta función en el navegador Safari.

Vamos a hablar sobre lo que sucede cuando se envía un formulario:

1. Algunos navegadores almacenan todos input valores de input con su atributo de name . Y ofrecerá autocompletar esos campos cuando encuentre los mismos elementos de input name d.

2. Algunos navegadores buscan solo el atributo autocomplete para ofrecer la finalización automática y,

3. Algunos otros buscan un atributo como label o name para input elementos de input también.

Ahora, el atributo de autocomplete puede tener un conjunto más grande de valores, incluidos cc-name ( cc-name tarjeta), cc-number , cc-exp , cc-csc (número de seguridad – CVV), etc. (lista completa aquí )

Por ejemplo, podríamos decir a un navegador que, este es el campo de número de tarjeta y debería ofrecer autocomplete cuando sea posible y debería habilitar la función de escanear la tarjeta de crédito como:

 Credit card number:   

En general:

más detallada ex:

Y cada valor de autocompletar es así:

 section-red : wrapping as a section. (named red) shipping : shopping/billing mobile : home|work|mobile|fax|pager (For telephone) tel : [Tokens][2] 

Cuando lo codificamos como este navegador, sabemos exactamente qué tipo de valor se debe llenar en ese campo.

Pero el nombre del navegador como Safari Need o los valores de id o label también deberían configurarse correctamente.

Soporte hasta ahora para los atributos de autocomplete , id y name para los valores de autocompletado.

 Browse Ver OS ID Name Autocomplete Chrome 50 OS X 10.11.4 No Yes Yes Opera 35 OS X 10.11.4 No Yes Yes Firefox 46 OS X 10.11.4 Yes Yes No Edge 25 Windows 10 No Yes No Safari 9.1 OS X 10.11.4 Partial Partial Partial Safari 9 iOS 9.3.1 Partial Partial Partial 

Hay más cosas en juego aquí. Recomiendo encarecidamente este blog al que me referí.

Descubrí que algo así funciona, pero considero que esta es una solución muy fea, ya que depende del texto que se muestra entre las label tags:

      
AutoFill test
 
revision 4
 
  Number
  Name on card
 Expiration date  
  CSC
 
   

No estoy del todo seguro, pero creo que los parámetros del name no son importantes.

Esto ahora está roto después de actualizar a iOS 8.1.3 esta mañana. Cuando en iOS 8.1.2 todo lo anterior funcionó bien, ahora la opción del teclado para escanear la tarjeta de crédito simplemente no aparece. Aquí está mi código, que funcionó ayer en iOS 8.1.2 y no funciona hoy en iOS 8.1.3:

       
 Credit Card Number 1
  
 Expiry month 
  
 Expiry year 
  
 
  
   

Incluso después de utilizar los métodos de autocompletado e identificación descritos anteriormente, tenía una etiqueta en la parte superior de mi página con el valor de Credit / Debit / Gift Card que impedía que iOS ofreciera la opción de escaneo CC. Terminé agregando esta etiqueta encima de mi campo de número CC para engañar a iOS y ofrecerle la opción Scan CC:

Card Number

La opacidad de 0 o un tamaño de fuente de 1pt evita que iOS ofrezca la opción.