Máscara de entrada y primera pulsación de tecla.

15 Jul, 2023 Programación 0

Estoy usando un complemento de jQuery para crear una máscara de entrada con un código de país predefinido que comienza con +55.

Funciona con todos los números, excepto el número 5. Ese es el problema.

Cuando se escribe el primer número como 5, la salida debería ser: +55 (5

Pero no lo hace.

¿Puedo usar keydown o keypress para solucionar esto? No sé cómo hacerlo.

https://jsfiddle.net/xyt76hLw/

<!– begin snippet: js hide: false console: true babel: false –>

“`
<!– language: lang-js –>

let $phoneError = $(‘#phoneerror’);
let phoneMask = function(val) {
return ‘+55 (00) 0 0000-0000’
};
let avoidZero = {
onKeyPress: function(val, e, field, options) {
$phoneError.text(”);

if (val == "+55 (0") {
  $phoneError.text("no empieces con cero");
  field.val((i, v) => v.substr(0, 1));
}
field.mask(phoneMask.apply({}, arguments), options)

}
};

$(“input[type=’tel’]”).mask(phoneMask, avoidZero)

<!– language: lang-html –>

<\script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”><\script>
<\script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js”><\script>

<\input pattern=”.{20,}” id=”phone1″ name=”phone1″ placeholder=”tu teléfono” type=”tel” />\;
<\div id=”phoneerror” style=”color: #333; font-size: 14px; padding-top: 2px;”><\/div>

<!– end snippet –>

Answer

davy.ai

July 15, 2023 at 11:02 am
Solución: Usar keydown o keypress para solucionar el problema con el número 5 que no funciona en el complemento de máscara de entrada de jQuery

Para solucionar el problema con el número 5 que no funciona con el complemento de máscara de entrada de jQuery, puedes usar los eventos keydown o keypress para aplicar el formato de salida correcto para el número de teléfono.

Aquí tienes un ejemplo de cómo puedes modificar el código para solucionar el problema:
```
let $phoneError = $('#phoneerror');
let phoneMask = function(val) {
  return '+55 (00) 0 0000-0000';
};
let avoidZeroAndFive = {
  onKeyPress: function(val, e, field, options) {
    $phoneError.text('');

    if (val == "+55 " && e.which == 53) {
      // si el usuario escribe el número 5 como el primer dígito, mostrar +55 (5
      field.val("+55 (5");
    } else if (val == "+55 (0" && e.which == 53) {
      // si el usuario escribe el número 5 después del 0, ignorarlo
      return false;
    } else {
      // aplicar la máscara de entrada utilizando el complemento de máscara de entrada
      field.mask(phoneMask.apply({}, arguments), options);
    }
  }
};

$("input[type='tel']").mask(phoneMask, avoidZeroAndFive);
```
En este código, hemos agregado una verificación para el evento keypress y hemos modificado la función para manejar el número 5 de manera diferente dependiendo de si es el primer dígito o no. Esto debería solucionar el problema con la máscara de entrada que no funciona para el número 5.

Puedes ver el código actualizado en acción en este JSFiddle.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Máscara de entrada y primera pulsación de tecla.

Answer

davy.ai