Entrada HTML que solo toma números y el símbolo +

Estoy intentando crear una entrada de texto personalizada para los números de teléfono que solo acepta números y el símbolo más (+); todos los demás personajes deben descartarse y no mostrarse en el campo.

Estoy tratando de hacer esto usando un controlador de eventos (onkeydown / onkeypress) y descartando las entradas correspondientes a otras teclas. Sin embargo, no puedo encontrar una forma de navegador cruzada para hacerlo. Aquí están los enfoques que he intentado y no funcionan:

  • Usar el evento onkeypress y mirar event.key para descubrir qué tecla se presionó: no funciona en Chrome (ver http://caniuse.com/keyboardevent-key ). ¿Hay alguna solución alternativa entre navegadores?

  • Usar el evento onkeycode y mirar event.keyCode: no funciona cuando necesitamos presionar varias teclas para imprimir un carácter (por ejemplo, un diseño de teclado en inglés requiere presionar Shift y = dar +). Además, permite que aparezcan caracteres como! @ # $% & * (), Ya que aparecen al presionar Mayús y un número. (Este es el enfoque seguido en JavaScript keycode allow number y plus symbol only , pero no me ayuda mucho;))

  • Usar el atributo de patrón HTML: esto realmente no parece impedir que las personas escriban lo que quieran.

¡Gracias!

Hay otra solución, puede usar Array.prototype.filter() para eliminar los caracteres incorrectos, y Array.prototype.join() para volver a crear la cadena antes de insertarla en la entrada.

Puede usar el evento oninput . Ejecuta un JavaScript cuando un usuario escribe algo en un campo .


Ver ejemplo a continuación

 var inputEl = document.getElementById('tel'); var goodKey = '0123456789+ '; var checkInputTel = function(e) { var key = (typeof e.which == "number") ? e.which : e.keyCode; var start = this.selectionStart, end = this.selectionEnd; var filtered = this.value.split('').filter(filterInput); this.value = filtered.join(""); /* Prevents moving the pointer for a bad character */ var move = (filterInput(String.fromCharCode(key)) || (key == 0 || key == 8)) ? 0 : 1; this.setSelectionRange(start - move, end - move); } var filterInput = function(val) { return (goodKey.indexOf(val) > -1); } inputEl.addEventListener('input', checkInputTel); 
  

Te sugiero que mires este proyecto. https://github.com/igorescobar/jQuery-Mask-Plugin/

Puede usarlo tal como es: $('.phone').mask('0000-0000'); Ejemplo: https://igorescobar.github.io/jQuery-Mask-Plugin/

O podrías leer el código fuente y ver cómo lo resuelven.

Siempre trate de hacer la validación del lado del servidor, esto es para ‘ayudar’ al usuario, no para validar los datos, (siempre puede abrir su consola y cambiar el valor del valor de entrada como desee)

Ahora, el método que usaría es:

Compruebe el valor de la entrada completa al cambiar y haga que ese valor pase a través de una expresión regular para limpiar caracteres no deseados, algo como esto:

 $('#tel').on('change input', function() { $(this).val($(this).val().replace(/([^+0-9]+)/gi, '')); }); 
   

usar entrada

type = “tel” o “phone”

Muestra el teclado numérico predeterminado en los teléfonos móviles.

Espero que esto ayude 🙂

Este enfoque genérico robusto está inspirado en la respuesta de @ R3tep. Permite definir patrones regexp a través del atributo de data-filter similar al atributo de patrón :

 // Apply filter to all inputs with data-filter: let inputs = document.querySelectorAll('input[data-filter]'); for (let input of inputs) { let state = { value: input.value, start: input.selectionStart, end: input.selectionEnd, pattern: RegExp('^' + input.dataset.filter + '$') }; input.addEventListener('input', event => { if (state.pattern.test(input.value)) { state.value = input.value; } else { input.value = state.value; input.setSelectionRange(state.start, state.end); } }); input.addEventListener('keydown', event => { state.start = input.selectionStart; state.end = input.selectionEnd; }); } 
     

Usando una combinación de un keyup eventos de keyup , algunos métodos de comparación RegEx / String y una variable intermedia, pude llegar a lo siguiente:

 var ele = document.getElementById('phone'); var curr = ""; var regexPatt = /^(0|[1-9][0-9]*)$/; ele.addEventListener('keyup',function(e){ var code = e.keyCode || e.which; if(this.value.match(regexPatt) || this.value.indexOf('+') > -1 || code == 8){ curr = this.value; this.value = curr; } else { this.value = curr; } }); 

Eche un vistazo al violín: https://jsfiddle.net/Lg31pomp/2/

Esto parece funcionar con dígitos, el carácter + y también si el usuario retrocede el elemento de entrada.

Tu opinión debe verse más o menos así:

  

y esta es la secuencia de comandos:

 function isNumberKey(evt) { var charCode = (evt.which) ? evt.which : event.keyCode; console.log(charCode); if (charCode != 43 && charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } 

Esta es una de las muchas soluciones posibles.