Que tal soy nuevo en javascript y necesito una funcion que me permita tener en una caja de texto 15 o 16 caracteres de una tarjeta de credito y que los primeros 11 0 12 numeros se cambien por asteriscos (*) al presionar la tecla y los ultimos 4 numeros si se deben mostrar normalmente.
Los campos se deben guardar en un input de tipo hidden para despues llevarlos a otros procesos
Por ejemplo:
al pulsar los numeros ************5791 y en el otro input debe de mostrar lo mismo pero sin los asteriscos(*) 1234657891825791 y al borrar el primero debera borrar algo del primer input tambien borrara del segudo input
Este es la funcion que tengo pero el problema es que al inicio no se van guardando los numeros solamente hasta que borras lo que has presionado y no puedo hacer que se haga desde que se oprima la primer tecla
<html>
<head>
<script language="javascript">
function delete_char(evt)
{
var charCode=evt.charCode ? evt.charCode : evt.keyCode
var char=String.fromCharCode(charCode)
if (charCode == 8 || charCode == 46 )
{
str_alterno = document.getElementById('hdnCardNumbrer').value;
if(document.getElementById('txtCardNumber').value. length < 1)
str_alterno = '';
else
{
var a_borrar= document.getElementById('hdnCardNumbrer').value.le ngth - document.getElementById('txtCardNumber').value.len gth;
str_alterno = str_alterno.substr(0,str_alterno.length-a_borrar);
}
document.getElementById('hdnCardNumbrer').value = str_alterno;
return false;
}
}
function masking_control(evt)
{
if(document.getElementById('selCardType').value==' AMEXCO'){
document.getElementById('txtCardNumber').maxLength =15;
var charCode=evt.charCode ? evt.charCode : evt.keyCode
var char=String.fromCharCode(charCode)
if (charCode == 8 || charCode == 46 )
{
str_alterno = document.getElementById('hdnCardNumbrer').value;
if(document.getElementById('txtCardNumber').value. length < 1)
str_alterno = '';
else
{
var a_borrar= document.getElementById('hdnCardNumbrer').value.le ngth - document.getElementById('txtCardNumber').value.len gth;
str_alterno = str_alterno.substr(0,str_alterno.length-a_borrar);
}
document.getElementById('hdnCardNumbrer').value = str_alterno;
return false;
}else
{
var control = document.getElementById('txtCardNumber');
var new_value = '';
for(var i=0; i<control.value.length;i++)
{
if(i<11)
new_value += '*';
else
new_value += control.value.charAt(i);
}
document.getElementById('txtCardNumber').value = new_value;
var str_aux = char;
if(str_alterno.length != 16)
str_alterno = str_alterno + str_aux;
document.getElementById('hdnCardNumbrer').value = str_alterno;
}
}else{
document.getElementById('txtCardNumber').maxLength =16;
var charCode=evt.charCode ? evt.charCode : evt.keyCode
var char=String.fromCharCode(charCode)
if (charCode == 8 || charCode == 46 )
{
str_alterno = document.getElementById('hdnCardNumbrer').value;
if(document.getElementById('txtCardNumber').value. length < 1)
str_alterno = '';
else
{
var a_borrar= document.getElementById('hdnCardNumbrer').value.le ngth - document.getElementById('txtCardNumber').value.len gth;
str_alterno = str_alterno.substr(0,str_alterno.length-a_borrar);
}
document.getElementById('hdnCardNumbrer').value = str_alterno;
return false;
}else
{
var control = document.getElementById('txtCardNumber');
var new_value = '';
for(var i=0; i<control.value.length;i++)
{
if(i<12)
new_value += '*';
else
new_value += control.value.charAt(i);
}
document.getElementById('txtCardNumber').value = new_value;
var str_aux = char;
if(str_alterno.length != 16)
str_alterno = str_alterno + str_aux;
document.getElementById('hdnCardNumbrer').value = str_alterno;
}
}
}
function PermiteNumeros()
{
var tecla = window.event.keyCode;
tecla = String.fromCharCode(tecla);
if(!((tecla >= "0") && (tecla <= "9")))
{
window.event.keyCode = 0;
}
}
function numero_tarjeta(){
alert(document.getElementById('hdnCardNumbrer').va lue + ' '+ document.getElementById('selCardType').value);
}
</script>
</head>
<body>
<select id="selCardType">
<option value =""></option>
<option value ="AMEXCO">AMEXCO</option>
<option value ="OTRO">OTRO</option>
</select>
<input id="txtCardNumber" onkeypress="masking_control(evt)" onkeyup="delete_char(evt);">
<input id="hdnCardNumbrer" onclick="numero_tarjeta();" />
</body>
</html>
