Autoformateo de entrada tipo tel

Resuelto
PJ47 Mensajes publicados 77 Fecha de registro   Estado Miembro Última intervención   -  
PJ47 Mensajes publicados 77 Fecha de registro   Estado Miembro Última intervención   -

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 Mensajes publicados 77 Fecha de registro   Estado Miembro Última intervención   1
     

    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

    0
    1. jordane45 Mensajes publicados 30426 Fecha de registro   Estado Moderador Última intervención   4 830
       

      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.

      0
    2. PJ47 Mensajes publicados 77 Fecha de registro   Estado Miembro Última intervención   1 > jordane45 Mensajes publicados 30426 Fecha de registro   Estado Moderador Última intervención  
       

      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

      0
    3. jordane45 Mensajes publicados 30426 Fecha de registro   Estado Moderador Última intervención   4 830 > PJ47 Mensajes publicados 77 Fecha de registro   Estado Miembro Última intervención  
       

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

      Lee bien y aplícalo...

      0
    4. jless > PJ47 Mensajes publicados 77 Fecha de registro   Estado Miembro Última intervención  
       

      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>
      1
    5. PJ47 Mensajes publicados 77 Fecha de registro   Estado Miembro Última intervención   1 > jless
       

      Hola @jless

      ¡muchas gracias, funciona perfectamente!

      J

      1
  2. Phil_1857 Mensajes publicados 1883 Fecha de registro   Estado Miembro Última intervención   169
     

    Hola,

    Tu solicitud es imprecisa

    auto formatear: ¿qué significa?

    mi entrada: ¿qué entrada?

    ¿En qué contexto?

    0
  3. PJ47 Mensajes publicados 77 Fecha de registro   Estado Miembro Última intervención   1
     

    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

    0
    1. PJ47 Mensajes publicados 77 Fecha de registro   Estado Miembro Última intervención   1
       

      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

      0