Formato de numero telefónico?

arcangelcross · #1 (**permalink**) 23/01/2007, 14:31

Hola a todos

Cómo ingreso un numero telefonico a un campo de texto de la forma en que al quitar el mouse o pasar a otro campo se vea así:333-3333.

Es decir, lo ingreso así: 333333 y al pasar a otro campo quede así 333-333

Gracias por la ayuda

saludos

Celcius · #2 (**permalink**) 23/01/2007, 15:32

Hola a mi me salio asi:

Código PHP:

  <!doctype html public "-//W3C//DTD HTML 4.01//EN">
<html>
   <head>
      <title>Jugando :)</title>
      <meta http-equiv="generator" content="PHP Designer 2005" />
<script language="javascript">
function cambialo(){
    var numeritos = document.forms[0].numero.value;
    var num = document.forms[0].numero.value.length;
    if(num>7){
      document.forms[0].numero.focus();
      alert("Lo siento, pero requerimos un numero menor a 7 caracteres");
    }else{
      var nuevos_numeritos="";
      for(i=0; i<num; i++){
        if(i==2){
          nuevos_numeritos+=numeritos.charAt(i)+"-";
        }else{
          nuevos_numeritos+=numeritos.charAt(i);
        }
      }
      document.forms[0].numero.value = nuevos_numeritos;
    }
}
</script>
   </head>

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<form>
<input type="text" name="numero" onBlur="cambialo();"><br><br>
<input type="text" name="otro_campo">
</form>
</body>
</html>

Solo que el evento focus(); solo funciona bien en Explorer pero no en firefox

.. por lo que leí es un Bug de Firefox..

arcangelcross · #3 (**permalink**) 23/01/2007, 17:43

Vamos a probar, muchisimas gracias

saludos

arcangelcross · #4 (**permalink**) 23/01/2007, 18:00

Funciona Excelente!! Gracias otra vez

derkenuke · #5 (**permalink**) 24/01/2007, 11:12

Me ha parecido didáctico el ejemplo para plantearlo con expresiones regulares.

Otra solución válida también:

Código PHP:

  <!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html>

    <head>

        <title>Formato numero de telefono</title>

        <script language="javascript">

        function cambialo(elemento){

            var valorAntes = elemento.value;

            elemento.value = valorAntes.replace( /^(d{3})(d{4})$/, "$1-$2" );

            var valorDespues = elemento.value;

            if( valorAntes==valorDespues )

                alert("Debes introducir siete digitos seguidos en la caja.\nEJEMPLO: 1234567");

        }

        </script>

    </head>

 
    <body>

        <input type="text" name="numero" onBlur="cambialo(this);">

    </body>

</html>

La expresión regular debe ser:
/^(\d{3})(\d{4})$/
La cual trata de encontrar el principio de la cadena (^); después tres digitos (\d{3}) que los agrupa metidos en un paréntesis para luego recordarlos y utilizarlos como $1; y por último cuatro dígitos seguidos (\d{4}) que metemos también en un paréntesis para utilizarlos luego como $2.

Luego de esto, se sustituye la incidencia por "$1-$2" que devolverá los tres dígitos, un guión, y los cuatro dígitos.

Poco a poco conseguiré que alguien utilice las expresiones regulares jeje.

Un saludo!

JavierB · #6 (**permalink**) 24/01/2007, 11:18

Hola derkenuke

Sin duda dicáctico

pero, te ha pasado lo mismo que a mí en varias ocasiones, la etiqueta [php] se "come" la barra invertida. La expresión regular es:

Código:

elemento.value = valorAntes.replace( /^(\d{3})(\d{4})$/, "$1-$2" );

Saludos,

derkenuke · #7 (**permalink**) 24/01/2007, 11:43

Sí, ya lo he reescrito abajo para mayor clarificación. Tendré que empezar a utilizar la etiqueta [ code ] entonces..

Celcius · #8 (**permalink**) 24/01/2007, 12:37

Cita:

Iniciado por derkenuke

elemento.value = valorAntes.replace( /^(\d{3})(\d{4})$/, "$1-$2" );

Super interesante, aunque da un poco de miedo

Cita:

Iniciado por derkenuke

Poco a poco conseguiré que alguien utilice las expresiones regulares jeje.

Yo estoy muy interesado por usarlas, créeme y creo que ya es hora de aprender... solo que no se donde.. voy a buscar

Cita:

Iniciado por derkenuke

Un saludo!

Otro para ti amigo!