Ver originales (Francés)

Autoformateo de entrada tipo tel

Resuelto
PJ47 -  

Hola,

Estoy buscando "auto formatear" mi entrada de tal manera que obtenga automáticamente el formato XXXXXXXXXX, sin importar lo que el usuario pueda escribir.

No sé si esto debe hacerse con una función preexistente o con otra programación.

Gracias de antemano

J

3 respuestas

  1.  PJ47 Autor

    Entonces encontré un código pero busco adaptarlo a mi caso

    <form> <label for="#phone-input">Número de teléfono<span class="required">*</span></label> <input id="phone-input" type="tel" value="" name="PhoneIn" aria-label="Por favor, ingrese su número de teléfono" placeholder="ej. 1(111)-111-1111"> <p>Por favor, complete la información anterior.</p> </form>
    function phoneMask() { var num = $(this).val().replace(/\D/g,''); $(this).val(num.substring(0,1) + '(' + num.substring(1,4) + ')' + num.substring(4,7) + '-' + num.substring(7,11)); } $('[type="tel"]').keyup(phoneMask);

    pero, ¿qué relaciona el código html con el código javascript?

    gracias

    1.  jordane45 Moderador

      Hola,

      Puedes poner tu script en tu archivo html (colocándolo entre las etiquetas <script></script> antes del </body> de tu página.

      Luego, recuerda vaciar la caché de tu navegador antes de probar.

    2.  PJ47 Autor
      @jordane45

      Hola @jordane45 EstadoModerador

      sí, eso es lo que hice, pero:

      tengo la línea de script que aparece en la parte superior de la página

      cabecera:

      <script> function phoneMask() { var num = $(this).val().replace(/\D/g,''); $(this).val(num.substring(0,10)); } $('#[type="tel"]').keyup(phoneMask); </script>

      html:

       <div class="row mb-3"> <input name="tel" type="tel" placeholder="0000000000" /> </div>

      y no funciona :-(

      https://www.sapa-traitement.com/formulaire.php

      J

    3.  jordane45 Moderador
      @PJ47

      Entonces.... no..... no has hecho lo que te dije...

      Lee bien y aplícalo...

    4.  PJ47 Autor
      @jordane45

      perdón, perdón, efectivamente no leí bien el </body>

      así que lo coloqué bien al final del body, pero el formato no se aplica

      he vaciado la caché y actualizado

      gracias

      J

    5. jless
      @PJ47

      Este script requiere jQuery ($), prueba así:

      <script> document.addEventListener('DOMContentLoaded', () => { const inputs = document.querySelectorAll('[type="tel"]'); for (const input of inputs) { input.addEventListener('input', () => { input.value = phoneMask(input.value); }); } function phoneMask(value) { return value.replace(/\D/g, '').substring(0, 10); } }); </script>
  2. Phil_1857

    Hola,

    Tu solicitud es imprecisa

    auto formatear: ¿qué significa?

    mi entrada: ¿qué entrada?

    ¿En qué contexto?

    1.  PJ47 Autor

      Hola @Phil_1857 EstadoMiembro,

      estoy en un formulario html de contacto.

      mi input en cuestión es el del teléfono.

      quiero que el teléfono se formatee como 0102030405 aunque el usuario ponga puntos o espacios.

      Gracias

      1.  PJ47 Autor

        He encontrado esta función de javascript:

        function phoneMask() { var num = $(this).val().replace(/\D/g,''); $(this).val(num.substring(0,1) + num.substring(1,4) + num.substring(4,7) + num.substring(7,10)); } $('[type="tel"]').keyup(phoneMask);

        pero no sé cómo usarla