Pasar digito de un campo text a otro

[vanditsession]

Hola,

Tengo un campo input del tipo text en el cual se ingresan 11 digitios, necesito que al tipear el utlimo digito este pase automaticamente a otro campo text.
Como puedo hacerlo?

Gracias.

[ElJavista]

A ver, sería más o menos así:

Código:

<input id="input1" maxlenght="11" onkeyup="pasar(this.value);" />
<input id="input2" />

Y el código JavaScript sería algo así:

Código:

function pasar(val) {
  if (val.length == 11) document.getElementById('input2').value = val.substr(10);
}

Servido.

(Iniciando cuenta regresiva)

[IsaBelM]

hay distintas maneras de hacerlo. una manera es, a cada pulsación de tecla, compruebas el largo del campo. una vez que el largo sea 11, le asignas ese valor al otro campo. otra manera es usar expresiones regulares, comprobando el valor con el método test() y cuando el método devuelva true, le asignas el valor al otro campo.
esta segunda manera es mejor, por que con ella te aseguras que todos los valores sean numéricos. a la expresión has de añadirle un cuantificador, en este caso {11}

[vanditsession]

Gracias a ambos. El codigo puesto por ElJavista me fue muy bien!

[sysmadryn]

Hola.

Puede ser que el codigo de Eljavista no funcione en IE6 ?

Saludos

[IsaBelM]

lo único destable de ese código es el uso del método substr(). no entiendo para que lo usa, ya que con él extrae desde el carácter 10 en adelante. vuelvo a recalcar que no es una buena idea hacerlo así si te es importante el contenido de la cadena

[ElJavista]

Cierto, no hay ninguna validación. No se me ocurrió hacerla. Podríase completar la cosa incluyendo otra función que haga la respectiva validación. Por otra parte no creo que en IE 6 no funcione esa función, talvez si, no puedo asegurarlo al 100%, alguien si tuviera la forma de comprobarlo podría hacernos el favor de decirnos si es así o no.

Bueno, esta sería la solución que propongo:

Código:

<input id="input1" maxlenght="11" onkeydow="entero(event);" onkeyup="pasar(this.value);" />
<input id="input2" />

La función pasar sería la misma y la función entero sería así:

Código:

function entero(evt) {
   var key = evt.keyCode;

 if (!((key > 47 && key < 58) || (key > 95 && key < 106) || key == 8 || key == 9 || key == 13 || key == 35 || key == 36 || key == 37 || key == 39 || key == 46)) {
       evt.preventDefault();
    }
 }

Talvez le haga falta permitir algún otro carácter o combinación de carácteres, pero básicamente sería así. Servido.

[IsaBelM]

no te parece mas sencillo con expresiones regulares [0-9]?. seguro que funciona en ie6, como no va a aceptar el método substr()? o tal vez en esa versión hubiera que usar el atributo value en el campo

[ElJavista]

IsaBelM, mi vida, por qué no te gusta la función substr? Por otra parte no uso expresiones regulares porque no domino ese tema. :P

[ElJavista]

Además en este caso mi código de validación es mejor, porque no permite ingresar carácteres, solo se puede ingresar números. No podría hacer eso con expresiones regulares.

[IsaBelM]

Iniciado por ElJavista

IsaBelM, mi vida, por qué no te gusta la función substr? Por otra parte no uso expresiones regulares porque no domino ese tema. :P

primero, me gustaría que no fueses condescendiente conmigo. segundo, de donde sacas que no me gusta usar substr()?? en tu primer código lo usas sin ningún sentido y en el segundo, no lo usas. si lees con atención mi último post verás que no comento nada acerca de ese método. en fin .......

[ElJavista]

Oye amiga, en primer lugar no es cierto que lo uso sin ningún sentido, mediante substr tomo el último carácter. No lo has probado?

[IsaBelM]

Iniciado por ElJavista

Además en este caso mi código de validación es mejor, porque no permite ingresar carácteres, solo se puede ingresar números. No podría hacer eso con expresiones regulares.

pensaré que tienes una mala tarde, y esta expresión [0-9]?? deja que se ingresen caracteres alfabéticos pero para eso tienes la función test(). de esta manera que propongo, se usan muchos menos recursos ya que solamente se validará el campo cuando tengo 11 caracteres. todo va sobre gustos

[ElJavista]

Ja, lo que pasa es que a lo mejor no entiendes lo que hace mi código, mi código evitar escribir, digitar el carácter que no es numérico. En cambio validar mediante una expresión regular lo que haría es permitir ingresar esos carácters, pero que te salga alguna alerta. Es más elegante mi solución, porque no lo pruebas antes de seguir refutándome?

[IsaBelM]

releyendo lo que el usuario quiere, quizás yo lo he interpretado mal. parece que lo que quiere ingresar en el otro campo es el carácter décimo primero. en ese caso, sí tiene sentido usar substr(), perdona. pero sigo en mis trece con usar expresiones regulares

[ElJavista]

OK IsabelM, sé que las expresiones regulares son muy potentes y si a ti te gusta hacer validaciones usando eso, genial, pero lo que yo hago es diferente a lo que se puede hacer usando expresiones regulares. No estamos hablando de una alerta que diga que en tal campo no debe contener carácteres, solo números. Estamos hablando de impedir la posibilidad de que en el campo aparesca un dichoso carácter no numérico. O sea, en ese campo, por más que pulses la letra "a" o la "z", igual no aparece nada. Eso, no creo que se pueda hacer usando expresiones numéricas y si me equivoco por favor muestra el código que haga eso. Probaste mi código antes de continuar refutándome?

[IsaBelM]

bien, otra solución para adaptarlo a lo que comentas. se usa objeto event para saber que tecla se ha pulsado. pasamos el valor de la tecla a ascii y verificamos , con test(), si coincide con el patrón, por último devolvemos true o false. de esta manera nos quitamos el alert

[ElJavista]

Genial, pero para hacer eso, no basta con que el código ascii tenga cierto rango, para que permita los numeros del 0 al 9, también hay que permitir que se pueda oprimir, la tecla tab, la tecla retroceso, la tecla para suprimir y todas las que se suelen usar. Me pregunto si será sencillo esa expresión regular. Me la podrías mostrar?

P.D. Nunca pensé que mi participación número 2000 ocurra discutiendo con una mujer. Vaya manera de celebrarlo.

[IsaBelM]

lo he hecho al vuelo

function digitos(eve) {
key = (eve.keyCode) ? eve.keyCode : eve.charCode;
if (key==8) return true;
patron =/\d/;
valor = String.fromCharCode(key);
return patron.test(valor);
}

[ElJavista]

Está tan bonito y complicado como el mío, además de que falta la permisión de algunas teclas como borrar, por otra parte no basta devolver un false para evitar la inserción de un carácter, para eso sirve preventDefault. La cosa sería más o menos asi:

Código:

function digitos(eve) {
  var res = false;
  key = (eve.keyCode) ? eve.keyCode : eve.charCode;
  if (key==8) res = true;
  patron =/\d/;
  valor = String.fromCharCode(key);
  res = patron.test(valor);

  if (!res) eve.preventDefault();
}

Igual aquí falta la permisión de otras teclas. Pero a la conclusión que llego es que el código se ve igual de complicado, talvez más complicado que el mío. Así que para no seguir discutiendo en vano, los que quieran y saben expresiones regulares que lo hagan de ese modo complicado y los que, como yo, no saben expresiones regulares, que lo hagan de mi modo complicado. Suerte!

[zerokilled]

@ElJavista,
dejando a un lado algunos detalles que has obviado ... veamos a ver si te agrada mas esta forma. la expresion dice exactamente lo mismo que has escrito en el condicional de if. no hace falta que me lo digas, ya se cual sera tu respuesta.

Código:

function entero(evt){
if(/[^0-9`-i#-'\x08\t\n\r\.]/.test(String.fromCharCode(evt.keyCode))) evt.preventDefault();
}

ahora bien, ese ejemplo en particular no deberia usarlo con keydown, creo que incluyendo tu solucion. prueba a ver que sucede si tipeas los caracteres alternos a las teclas numericas; o sea, los simbolos ! hasta ). la razon es porque keyCode adquiere el mismo valor en una tecla que puede representar dos o mas caracteres. por ejemplo la tecla 2 -en el layout QWERTY español- contiene 3 caracteres (2, ", @) y en keydown (al igual que keyup), keyCode contiene el valor 50.

[ElJavista]

Gracias por poner una expresión tan espectacular, la cual recomiendo, pero particularmente no me gusta porque no la comprendo del todo ya que no domino el tema de expresiones regualres. Por otra parte tenemos un problema con el keyascii y el evento que ejecuta.

En primer lugar en el evento onkeyup y onkeydown los valores de keyCode son los mismos para los navegadores principales, pero keypress no, keypress es más difícil de emparejar para todos los navegadores. Podrías dar en todo caso la solución completa. A mi se me ocurre cosas más complicadas como calcular el valor que tendría el input en caso de que se escribiera el carácter pulsado. Caso que no sea un número se omitiría que ese carácter sea ingresado en el input. Es solo una idea. Qué solución final sugieres zerokilled?

[zerokilled]

la expresion te resulta complicada porque es una transcipcion del condicional, que por cierto, tiene cosas que no se para que estan. o sea, me refiero a los caracteres `abcdefghi#$%&' -el punto te lo perdono ya que pudiera ser un numero fraccionario, pero entonces habria que incluir la coma ya que en paises se utiliza la coma como punto flotante.

por otro lado, no he sabido de navegador alguno en que keypress asigna un valor distinto a lo habitual en la propiedad keycode. ¿podrias indicar algun navegador? fijate que keycode en keypress representa el valor unicode del caracter en si, independientemente si es un caracter alternativo de una tecla.

[ElJavista]

No me refiero a esa diferencia con el keypress, me refiero a como obtener el valor ascii. Bueno, sé que hay una manera de hacerlo, pero bueno. En todo caso, ya que mi solución es rara e incompleta podrías dar la solución más óptima que a ti te paresca.

[IsaBelM]

Iniciado por ElJavista

P.D. Nunca pensé que mi participación número 2000 ocurra discutiendo con una mujer. Vaya manera de celebrarlo.

ayer se me pasó este comentario. no sé como interpretarlo, así que me contendré

[sysmadryn]

El problema del IE6 parece ser con el onkeyup porque con el onkeypress anda bien.

<html>
<body>
<input type="text" onkeypress="alert('onkeypress fired');" onkeyup="alert('onkeyup fired');"/>
</body>
</html>

[zerokilled]

@sysmadryn,

en ese ejemplo particular parece ser que onkeyup no funciona pero es una suposicion erronea. el problema esta en el cartel de alerta. onkeypress y onkeyup se lanzan cuando se levanta una tecla, eso ha funcionado igual en todos los navegadores. lo que sucede en este caso particular -a mi entender- es que al aparecer el primer alerta (onkeypress) el script se detiene y para continuar hay que cerrar el alerta. sin embargo, de alguna forma onkeyup no puede capturar el evento por una de dos razones: porque el evento generado ya se perdio al aparecer el cartel, o porque se ha generado un nuevo evento. en fin, para demostrar que si deberia funcionar, realiza otro experimento que no sea con ventanas modales que interrumpan el proceso de javascript. el siguiente codigo es un script que habia escrito para determinar los valores de ciertas propiedades. en esencia, utiliza tres eventos: onkeydown, onkeyup, y onkeypress. fijate que sin ninguna ventana modal, los tres eventos se disparan correctamente.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'

'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'> 
<html xmlns='http://www.w3.org/1999/xhtml'><head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
<title>Key Events</title> 
<script type='text/javascript'> 
function key(evt, id) {
var evt = evt || event;
var inputs = document.getElementById(id).getElementsByTagName("input");
inputs[0].value = evt.keyCode;
inputs[1].value = String.fromCharCode(evt.keyCode);
inputs[2].value = evt.which;
inputs[3].value = String.fromCharCode(evt.which);
}
 
document.onkeypress = function(evt){
key(evt, "press");
}
 
document.onkeyup = function(evt){
key(evt, "up");
}
 
document.onkeydown = function(evt){
key(evt, "down");
}
</script> 
<style type='text/css'> 
body{
font-family:georgia;
background:#111 url(firebug.jpg) no-repeat -2em 21em;
color:#fff;
margin:1em;
margin-left:4em;
}
 
p{
text-align:right;
width:40em;
}
 
.section{
border-top:1px dotted #333;
padding-top:2em;
}
 
span{
display:inline-block;
width:6.65em;
text-align:center;
}
 
input{
width:8em;	
text-align:center;
background:transparent;
border:0;
}
 
p.section input{
width:31.5em;
padding:.25em;
background:#333;
border:1px solid #666;
}
 
input, textarea{
color:#fff;
font-family:monospace;
}
 
h1{
font-size:1.75em;
border-bottom:1px solid #333;
}
 
h2{
float:left;
font-weight:normal;
padding-top:.75em;
}
</style> 
</head> 
 
<body> 
<h1>Keys</h1> 
<h2>onkey-</h2> 
<p class="header"><span>keyCode</span> <span>char key</span> <span>which</span> <span>char which</span></p> 
<p id="down">down: <input readonly="readonly" /> <input readonly="readonly" /> <input readonly="readonly" /> <input readonly="readonly" /></p> 
<p id="press">press: <input readonly="readonly" /> <input readonly="readonly" /> <input readonly="readonly" /> <input readonly="readonly" /></p> 
<p id="up">up: <input readonly="readonly" /> <input readonly="readonly" /> <input readonly="readonly" /> <input readonly="readonly" /></p> 
<h2>Type in box</h2> 
<p class="section"><input /></p> 
</body></html>

[ElJavista]

Iniciado por IsaBelM

ayer se me pasó este comentario. no sé como interpretarlo, así que me contendré

No es una ofensa. Solo es algo extraño. Usualmente no discuto demasiado en este foro y menos con una mujer. Entonces quise decir que mi participación número 2000 fue muy inusual. Eso es todo.

[sysmadryn]

No parece ser una interferencia porque este codigo tampoco funciona en IE6 para keyup pero si para keypress :

<html>
<body>
onkeyup : <input type="text" onkeyup="this.value='onkeyup fired';"/>
<br />
onkeypress : <input type="text" onkeypress="this.value='onkeypress fired';"/>
</body>
</html>