formulario de tarjeta de crédito dinámica con javascript. sin jquery.

Esta es la primera vez que trabajo en JavaScript en el trabajo. La solicitud de la función fue darle vida al formulario de la tarjeta de crédito como fab.com. Destacó el logotipo correcto cuando ingresó los números de la tarjeta de crédito, las pestañas automáticas (no es mi decisión) y los campos de entrada cambiantes si era una tarjeta AMEX. Traté de encontrar un complemento o un tutorial, pero realmente no había mucho por ahí. Así que fui con http://webstandardssherpa.com/reviews/auto-detecting-credit-card-type
código barebone para crear el mío. Espero que ayude a alguien.

Lo primero que hice fue dividir el campo de entrada en 4 campos y agregar los cuatro logotipos en el parcial de la tarjeta de crédito haciendo esto:

.control-group
= f.label :number, 'Number *', class: 'control-label'
.controls
= f.text_field :number, value: '', required: true, autofocus: true
= f.fields_for :number do |c|
= c.text_field 'cnumber1', autofocus: true, value: '', maxlength: 4, size: 4, tabindex: 1
= c.text_field 'cnumber2', value: '', maxlength: 4, size: 4, tabindex: 2
= c.text_field 'cnumber3', value: '', maxlength: 4, size: 4, tabindex: 3
= c.text_field 'cnumber4', value: '', maxlength: 4, size: 4, tabindex: 4
#cc-logo
#amex_logo
=image_tag("amex.jpg")
#discover_logo
=image_tag("dsc.jpg")
#mastercard_logo
=image_tag("mc.jpg")
#visa_logo
=image_tag("visa.jpg")

Luego agregué un archivo javascript y agregué esto:

function getCreditCardType(accountNumber)
{
var accountNumber = document.getElementById('transaction_credit_card_number_cnumber1').value;
var result = "default";

if(/^5[1-5]/.test(accountNumber))
{
result
= "mastercard";
}

else if (/^4/.test(accountNumber))
{
result
= "visa";
}

else if (/^3[47]/.test(accountNumber))
{
result
= "amex";
}

else if (/^6/.test(accountNumber))
{
result
= "discover";
}

else if (/^$/.test(accountNumber))
{
result
= "default"
}

return result;
}

Básicamente, lo que hace lo anterior es identificar qué tipo de tarjeta es. Usé expresiones regulares y los estándares CC para probar el número. Establecí los campos en un máximo de 4. La identificación ‘ número de tarjeta de crédito de transacción cnumber1′ fue generada automáticamente por rieles y se puede encontrar si realiza un elemento de inspección de la página en Chrome.

El siguiente es la lógica. Es un poco hacky, ¡pero hizo el trabajo!

function handleEvent(event)
{
var value = event.target.value,
type
= getCreditCardType(value);

switch (type)
{
case "mastercard":
var logo = document.getElementById('mastercard_logo');
{
logo
.style.opacity = "1.0";

// IE fallback

logo
.style.filter = 'alpha(opacity=100)';

break;
}

case "visa":
var logo = document.getElementById('visa_logo');
{
logo
.style.opacity = "1.0";

// IE fallback

logo
.style.filter = 'alpha(opacity=100)';

break;
}

case "amex":
var logo = document.getElementById('amex_logo');
var secondField = document.getElementById('transaction_credit_card_number_cnumber2')
var thirdField = document.getElementById('transaction_credit_card_number_cnumber3')
var fourthField = document.getElementById('transaction_credit_card_number_cnumber4')
{
logo
.style.opacity = "1.0";

// IE fallback

logo
.style.filter = 'alpha(opacity=100)';

secondField
.setAttribute("maxlength", "6");
secondField
.style.width = "90px";

thirdField
.setAttribute("maxlength", "5");
thirdField
.style.width = "60px";

fourthField
.setAttribute("type", "hidden");

break;
}

case "discover":
var logo = document.getElementById('discover_logo');
{
logo
.style.opacity = "1.0";

// IE fallback

logo
.style.filter = 'alpha(opacity=100)';

break;
}

case "default":
var master = document.getElementById('mastercard_logo');
var visa = document.getElementById('visa_logo');
var amex = document.getElementById('amex_logo');
var discover = document.getElementById('discover_logo');
var secondField = document.getElementById('transaction_credit_card_number_cnumber2')
var thirdField = document.getElementById('transaction_credit_card_number_cnumber3')
var fourthField = document.getElementById('transaction_credit_card_number_cnumber4')
{

master
.style.opacity = "0.4";
visa
.style.opacity = "0.4";
amex
.style.opacity = "0.4";
discover
.style.opacity = "0.4";

// IE fallback

master
.style.filter = 'alpha(opacity=40)';
visa
.style.filter = 'alpha(opacity=40)';
amex
.style.filter = 'alpha(opacity=40)';
discover
.style.filter = 'alpha(opacity=40)';

secondField
.setAttribute("maxlength", "4");
secondField
.style.width = "40px";

thirdField
.setAttribute("maxlength", "4");
thirdField
.style.width = "40px";

fourthField
.setAttribute("type", "text");

break;
}
}
}

Todo esto probablemente deba ser refactorizado, pero creo que lo desglosa todo con bastante claridad. Mi opacidad está establecida en 0.4 por defecto y cuando se cumple cada caso, la opacidad del logo correspondiente cambia a 1.0. Además, si echa un vistazo al caso AMEX, también cambia el campo de entrada. Escondí el último campo de entrada e hice que el ancho del segundo y tercer campo fuera de 90px y 60px. Permite 6 números y 5 números, respectivamente.

Mi último caso es el caso predeterminado que devuelve todo a la normalidad cuando se borran todos los números. Observe que solo verifico los primeros 4 números de la tarjeta de crédito.

Ahora llega el final. tabulación automática y escucha de “keyup” que activa el js cuando escribe y “blur” que se activa cuando pega.

$(function(){
$
('.control-group .controls').keyup(function(e){
if ($(this).val().length==$(this).attr('maxlength'))
$
(this).next(':input').focus()
else
if ($(this).val().length==0)
$
(this).prev(':input').focus()

})
})

document
.addEventListener("DOMContentLoaded", function(){
var ccbox = document.getElementById("transaction_credit_card_number_cnumber1");
ccbox
.addEventListener("keyup", handleEvent, false);
ccbox
.addEventListener("blur", handleEvent, false);
}, false);

¡OK, entonces mentí! Usé una línea de jquery que permite autotab hacia adelante y hacia atrás.

¡Y eso es! Si tiene alguna pregunta, una mejor solución o una refactorización, no dude en comentar a continuación. Tengo curiosidad sobre cómo puedo escribir esa función jquery en javascript normal.

¡Gracias! ¡Espero que esto ayude a alguien!