teclado numérico en varios imputs

peinprats · #1 (**permalink**) 26/11/2012, 12:03

bueno pues ando un poco liado haciendo un login, con teclado numérico pero actualmente ando algo estancado con lo que viene siendo el pad numérico y la introducción de los datos en varios inputs

este es el código que tengo (solo muestro el pad y el input, no tiene sentido que muestre el login)

Código:

<head>
<script language="Javascript" type="text/javascript">
function clave(numero) {
		document.formulario.campo.value += numero;
        document.formulario.campo.focus();
        return;
}
</script>
</head>
<body>
<center>
<form action="login.php" method="post" name="formulario">
<input type="text" name="campo" size="21"><br>
<input onclick="clave('1');" type="button" value="1" name="1">
<input onclick="clave('2');" type="button" value="2" name="2">
<input onclick="clave('3');" type="button" value="3" name="3"><br>
<input onclick="clave('4');" type="button" value="4" name="4">
<input onclick="clave('5');" type="button" value="5" name="5">
<input onclick="clave('6');" type="button" value="6" name="6"><br>
<input onclick="clave('7');" type="button" value="7" name="7">
<input onclick="clave('8');" type="button" value="8" name="8">
<input onclick="clave('9');" type="button" value="9" name="9"><br>
<input type="reset" value="Borrar" name="borrar">
</form>
</center>
</body>
</html>

pues la cosa es que así, me introduce los datos en un input, pero si creo otro, me los duplica, y mi intención es que solo coloque los datos en el input que se encuentre seleccionado.

Gracias de ante mano.

zerokilled · #2 (**permalink**) 26/11/2012, 12:28

buenas,
evidentemente no te va funcionar así. ¿conoces lo que es diseño modular? básicamente es separar cada cosa en componentes más pequeños y que sean reusables. generalmente, la reusabilidad se logra haciendo que ese componente sea genérico. es decir, que no está atado directamente sobre el componente que se aplica. en tu caso, la función clave siempre hace referencia al mismo campo. una posible solución podría ser enviar en otro parámetro el nombre del campo. luego en el cuerpo de la función haces referencia al campo utilizando ese parámetro.

Código:

function clave(numero, campo){
document.forms['formulario'].elements[campo].value = ... ;
...
}

<element onclick="clave('#', 'nombre_campo');" ... >

aunque se soluciona el problema, aún así se asume que los keypads deben estar dentro del form formulario. se puede seguir adaptando para hacerlo más genérico y reusable.

peinprats · #3 (**permalink**) 27/11/2012, 04:28

gracias, pero parece que soy demasiado novato en el javascript :/ y parece que no me entero mucho.

he intentado lo que me dices pero no si lo implemento mal o donde esta el problema, pero no me sale bien.

Cita:

<head>
<script language="Javascript" type="text/javascript">
function clave(numero, campo){
document.forms['formulario'].elements[campo].value += clave;
document.forms['formulario'].elements[numero].value += clave;
document.formulario.campo.focus();
return;
}
</script>
</head>
<body>
<center>
<form action="login.php" method="post" name="formulario">
<input onclick="clave('#', 'campo');"type="text" name="campo" size="21"><br>
<input onclick="clave('#', 'numero');"type="text" name="numero" size="21"><br>
<input onclick="clave('1');" type="button" value="1" name="1">
<input onclick="clave('2');" type="button" value="2" name="2">
<input onclick="clave('3');" type="button" value="3" name="3"><br>
<input onclick="clave('4');" type="button" value="4" name="4">
<input onclick="clave('5');" type="button" value="5" name="5">
<input onclick="clave('6');" type="button" value="6" name="6"><br>
<input onclick="clave('7');" type="button" value="7" name="7">
<input onclick="clave('8');" type="button" value="8" name="8">
<input onclick="clave('9');" type="button" value="9" name="9"><br>
<input type="reset" value="Borrar" name="borrar">
</form>
</center>
</body>
</html>

al seleccionar el campo me saca la función en el, en vez de dejarlo seleccionado, y solo funciona el botón de reset.

zerokilled · #4 (**permalink**) 27/11/2012, 06:25

ya voy viendo como lo quieres hacer, un solo keypad para todos los campos. es normal cuando el campo pierde el foco al hacer click en uno de los botones. en este caso, para escribir en el campo activo, tendrías que almacenar en una variable la referencia del último campo que haya recibido foco. esto lo haces programando el evento onfocus de los campos y dentro del handler actualizar alguna variable global.

Código:

var lastfocus = null;
<element onfocus="lastfocus = this;">

luego en tu función clave utilizarías directamente la variable global para accesar el último campo que recibio focus.

peinprats · #5 (**permalink**) 04/12/2012, 09:55

buff gracias pero aun no lo he solucionado :S

lo del foco si no lo entendido mal, lo que debo hacer es poner en el prinero ese codigo que me pones <element onfocus="lastfocus = this;">, en el segundo no pondria nada. pero en el script ya me pierdo.. la variable lastfocus como la llamo ?

como verás no ando del todo muy ductil con el tema este, pero poco a poco se va aprendiendo mas. Y mas con gente como tu que ayuda ;)

zerokilled · #6 (**permalink**) 04/12/2012, 21:03

Cita:

lo del foco si no lo entendido mal, lo que debo hacer es poner en el prinero ese codigo que me pones <element onfocus="lastfocus = this;">, en el segundo no pondria nada.

tienes que agregar el evento en todos los campos donde se va insertar lo marcado en el keypad.

Cita:

pero en el script ya me pierdo.. la variable lastfocus como la llamo ?

dentro de tu función utilizas esa variable como cualquier otra. solo que esa variable será la referencia del campo que tuvo el foco. es importante que primero pongas el foco sobre el campo que deseas escribir antes de marcar los números.

Código:

function ...{
...
lastfocus.value =  valor;
...
}

peinprats · #7 (**permalink**) 05/12/2012, 03:12

por fin!! muchisimas gracias!

posteo el codigo para quien le haga falta usarlo en un futuro.

Cita:

Los inputs:

Cita:

Y el pad:

Cita:

De nuevo gracias a esta comunidad! y sobre todo a zerokilled en especial por ayudarme en este script.