Esta é a minha primeira vez trabalhando em javascript no trabalho. O pedido de recurso era para incrementar o formulário de cartão de crédito, como fab.com. Ele destacou o logotipo correto quando você inseriu os números do cartão de crédito, guias automáticas (não é minha decisão) e campos de entrada de alteração se fosse um cartão AMEX. Tentei encontrar um plugin ou um tutorial, mas não havia muito lá fora. Então, usei o código http://webstandardssherpa.com/reviews/auto-detecting-credit-card-type
barebone para criar o meu próprio. Espero que ajude alguém.
A primeira coisa que fiz foi quebrar o campo de entrada em 4 campos e adicionar os quatro logotipos na parcial do cartão de crédito ao fazer isto:
.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")Em seguida, adicionei um arquivo javascript e adicionei este:
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;
}Basicamente, o que o descrito acima faz é identificar o tipo de cartão. Usei regex e os padrões CC para testar o número. Defini os campos para um máximo de 4. O id ‘ número do cartão de crédito da transação cnumber1′ foi gerado automaticamente pelo rails e pode ser encontrado se você fizer uma inspeção do elemento da página no cromo.
A seguir vem a lógica. É meio hackeado, mas deu certo!
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;
}
}
}Provavelmente, tudo isso precisará ser refatorado, mas acho que quebra tudo de forma bastante clara. Minha opacidade é definida como 0,4 como padrão e quando cada caso é encontrado, a opacidade do logotipo correspondente muda para 1,0. Além disso, se você der uma olhada no caso AMEX, ele também altera o campo de entrada. Eu escondi o último campo de entrada e fiz a largura do segundo e do terceiro campo 90px e 60px. Ele permite 6 números e 5 números, respectivamente.
Meu último caso é o caso padrão que retorna tudo de volta ao normal quando todos os números são apagados. Observe que eu verifico apenas os primeiros 4 números do cartão de crédito.
Agora chega o fim. tabulação automática e escuta de “keyup” que ativa o js quando você digita e “blur” que ativa quando você cola.
$(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, então eu menti! Usei uma linha de jquery que permite o autotab para frente e para trás.
E é isso! Se você tiver alguma dúvida, melhor solução ou refatoração, sinta-se à vontade para comentar abaixo. Estou curioso para saber como posso escrever essa função jquery em javascript regular.
Obrigado! Eu espero que isso ajude alguém!