Número, barra y YA!

jenusys · #1 (**permalink**) 23/05/2009, 00:40

¡ Hola foreros !
Es la primera vez que hago un grito de auxilio y es por física pereza de no investigar y ahorrar trabajo así que ahí verán si me alcahuetean.

Tengo un <input type="text"> y necesito ingresar muchos números de facturas allí separadas por una barra "/" y cada número de factura tiene 7 dígitos o caracteres. Lo que necesito es que esa barrita me aparezca automáticamente luego de escribir cada número de factura, es decir, que me la ponga después de escribir 7 caracteres.
¿Me explico?

1234567/asdfghj/9876543/

¡Gracias de antemano!

gammassp · #2 (**permalink**) 23/05/2009, 00:56

Lo que se me ocurre asi medio rápido es hacer un contador de caracteres y llamarlo en el onkeyup. Esta funcion contaría los caracteres insertados despues de una / o desde el inicio (si aun no se ha insetado ninguna) y si hay 7 caracteres en el iput le agregaría automaticamente una barra.
Y para hacerlo un poco más dinamico podrias hacer otra funcion a la que llamarias desde onchange y que se encargaría de que exista una / cada 7 caracteres de otra forma la agregaria despues de dicha cantidad.
Y ya para completar podrias prohibir que se esriba caracteres especiales. Solo letras (mayusculas y/o minusculas) y numeros. Esto no debería molestarte el ingreso ya que las / se agregarias mediante codigo y esta funcion debería ser llamada desde el keypress.

Más o menos eso se me ocurre. El código no te lo pongo porque son las 4 am en argentina y ya me tome una par de birras asi que si empiezo a programar va a salir cualquier cosa :S

Saludos

jenusys · #3 (**permalink**) 23/05/2009, 09:57

¡ Gracias GAMMASSP !

Bueno, tengo solo ésto por mi ignorancia en JS, pero aún tengo dos problemas:

1. El más grande problema es que la barra me la pone fuera del INPUT y por ende fuera de todo contexto.

2. Solo me cuenta siete caracteres pero luego de eso no me contaría otros siete caracteres.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">

function siete_chars()
{
if (document.getElementById('barrita').value.length >= 7)
{
document.write("/")
}
}

</script>
</head>

<body>
<input type="text" id="barrita" onKeyUp="siete_chars()">
</body>
</html>

AnesGy · #4 (**permalink**) 23/05/2009, 11:48

Pero hombre, no uses document.write, eso escribe en el documento no en el input. Piensa en de que manera posible el explorador va a llegar a entender que cuando dices escribe en el documento te refieres a que escriba en el input?.

Código javascript:

Ver originaldocumet.getElementsById('barrita').value = documet.getElementsById('barrita').value + "/";

jenusys · #5 (**permalink**) 23/05/2009, 13:54

GRACIAS ANESGY! Cuenta con karma positivo de mi parte. Aunque tu sintaxis tenía dos errores no de lógica sino de escritura: document y Element.

Ahora solo me queda el último problema y es que luego de esos primeros siete caracteres y barra me ponga otros siete caracteres y luego otra barra.

¿Alquien que me ayude con eso?

gammassp · #6 (**permalink**) 23/05/2009, 22:00

Te desarrollo algo de código en vivo. Haber si te sirve:

Si vas a meter los numeros todos en un mismo text y queres que se vallan poniendo las barras mediante vas escibiendo, podes usar esto.

Código HTML:

Ver original<input type="text" id="barrita" onkeyup="barras(this)" onchange="barras(this)">

Código JavaScript:

Ver originalfunction barras(campo){
  var z = 0;
  var nuevoValor = "";
  for(var i = 0; i < campo.value; i++){
    z++;
    if(z == 7){
      z = 0;
      if(campo.value.charAt(i) != "/"){
        nuevoValor += campo.value.subString(0, i + 1) + "/";
        if(i + 1 < valor){
          nuevoValor += campo.value.subString(i + 1);
        }
      }   
    }
  }
  campo.value = nuevoValor;
}

Con esta función te debería alcanzar. Yo aca te la puse en el onkeyup y en el onchange suponiendo que vos escribis los caracteres todos en el text que te va agregando las barras pero podes usarla de varias formas.

Exitos.

P.D.: como verás hoy estoy re buena gente... hasta te programo gratis :P

jenusys · #7 (**permalink**) 23/05/2009, 23:10

GAMMASSP ¡PARCERO!

Mil gracias por la ayuda tan desinteresada. Ví que corregiste algo en tu código y te cuento que aún no me funciona aunque tu lógica parece estar bien. Buscaré qué es lo que te falta (o si no es mucha molestia puedes buscarlo tú y mejorarás tu ranking

). De cualquier forma vuelvo a agradecerte pues ya tengo material para trabajar. Cuenta con karma positivo.

gammassp · #8 (**permalink**) 24/05/2009, 22:21

Es cierto, había un par de cosas mal... Por dios como voy a poner subString!!! que animal...
Eso es por no probar las cosas :P
Es que escribí la función directamente en el foro sin siquiera probarla :S

Acá te mando esta, que si está probada...

Código JavaScript:

Ver originalfunction barras(campo){
  var z = 0;
  var primeraMitad = "";
  var segundaMitad = "";
  for(var i = 0; i < campo.value.length; i++){
    z++;
    if(z == 7){
      z = 0;
      if(campo.value.charAt(i + 1) != "/"){
        i++;
        primeraMitad = campo.value.substring(0, i) + "/";
        if(i + 1 < campo.value.length){
          segundaMitad = campo.value.substring(i);
        }
        campo.value = primeraMitad + segundaMitad;
        primeraMitad = "";
        segundaMitad = "";
      }else{
        i++;
      }
    }
  }
}

jenusys · #9 (**permalink**) 25/05/2009, 11:56

Por aquí decimos: "Vos sos de los mios", o "Parcero" a nuestros más queridos amigos, entonces GAMMASSP vos sos de los mios parcero.