3

Tengo una función en JavaScript para rellenar formularios que me permite solo introducir números en una caja de texto.

El problema es que solo funciona en ordenadores y no en dispositivos móviles.

function validarNumero(e) {
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla==8) return true; 
    patron =/[0-9]/;
    te = String.fromCharCode(tecla); 
    return patron.test(te); 
 }

Y en la parte de codigo HTML

<input type="text" id="txtNumero" maxlength="10" onkeypress="return validarNumero(event)">
4
  • ¿Podrías publicar también el <input>? Gracias. Commented el 14 ago. 2018 a las 8:46
  • 1
    Claro que si, ahora lo publico
    – Popularfan
    Commented el 14 ago. 2018 a las 9:03
  • Y también, si no es molestia, cómo gestionas los eventos (o cómo los agregas al <input>) si no es usando atributos on.... Commented el 14 ago. 2018 a las 9:05
  • Gracias. Ya tengo otra solución alternativa (editando :). Commented el 14 ago. 2018 a las 9:07

3 respuestas 3

4

Si no puedes hacer uso de HTML5 y CSS3 entonces quizá lo más portable es capturar los eventos keyup y change para eliminar los números del campo del formulario de la siguiente manera:

function limpiarNumero(obj) {
  /* El evento "change" sólo saltará si son diferentes */
  obj.value = obj.value.replace(/\D/g, '');
}
<input type="text" id="txtNumero"
  maxlength="10"
  onkeyup="limpiarNumero(this)"
  onchange="limpiarNumero(this)"
/>

El motivo es la complejidad de pulsaciones de teclado que debes filtrar para mantener compatibilidad con todo (dispositivos móviles, copiar/pegar, desplazarse con el cursor, seleccionar parte del texto, etc).

En la documentación podrás ver más información acerca de los códigos del teclado.

Yo, personalmente, mantendría una versión híbrida que pudiera hacer uso de las capacidades de HTML5 en caso de estar presentes.

Conservo la versión HTML5 + CSS3 en el historial de modificaciones.

8
  • No puedo usar html5 pero si CSS3. Ese es el handicap
    – Popularfan
    Commented el 14 ago. 2018 a las 9:02
  • ¿Podrías publicar el input y cómo configuras el control de introducción de texto? Gracias. Commented el 14 ago. 2018 a las 9:03
  • Ya publique el input
    – Popularfan
    Commented el 14 ago. 2018 a las 9:07
  • Prueba el código en un PC de escritorio y en un móvil para ver si se adapta a tus necesidades. Si te parece bien puedo agregar al final de mi respuesta una solución híbrida que use la funcionalidad de HTML5 en caso de estar presente y que use javascript en caso de que no sea así. Commented el 14 ago. 2018 a las 9:39
  • Perdona no había visto este ultimo código que me pusistes. Voy a probarlo
    – Popularfan
    Commented el 14 ago. 2018 a las 9:51
2

Deberías utilizar el tipo number del input siempre y cuando no necesites dar soporte a dispositivos más antiguos que los mostrados en la tabla de caniuse.

<input type="number" />

UPDATE

Ya que no puedes usar HTML5, podrías probar con esta función:

function validarNumero(e){
    var charCode = (e.which) ? e.which : e.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)){
        return false;
    }
    return true;
}
3
  • No puedo usar html5
    – Popularfan
    Commented el 14 ago. 2018 a las 9:00
  • @Popularfan he actualizado la respuesta para usar JavaScript
    – Dibort
    Commented el 14 ago. 2018 a las 9:08
  • Con esta solución tampoco me funciona, va bien en ordenador pero en móvil me deja introducir letras
    – Popularfan
    Commented el 14 ago. 2018 a las 9:16
1

Yo te propongo 2 soluciones.

Utilizar:

<input type="number">

Con esto consigues que en el móvil salga el teclado numérico. Esto tiene pros y contras.

Por una parte te ahorras validaciones y tienes una entrada de datos mas protegida. Por otra parte, no puedes poner un cero delante '0898' por ejemplo, te eliminaría el 0. Esto es un problema si son códigos postales, números de teléfono, etc...


Otra solución es utilizar:

<input pattern="[0-9]{7,15}">

Esto es una validacion por HTML5 y funciona de igual manera que required, minlength, maxlength, etc..

El ejemplo que hay arriba te valida que sea una cadena de entre 7 y 15 dígitos donde solo puedan haber caracteres de entre 0-9 (a mi me funciona muy bien para una primera validación de teléfonos)

Esto es solo un ejemplo, puedes utilizar cualquier expresión regular que a ti te vaya bien.


No te se decir como mejorar tu código javascript pero podrías mantener esta opción para ordenador y utilizar una de estas opciones para móvil.

3
  • No puedo usar HTML5, necesito hacerlo con una versión anterior
    – Popularfan
    Commented el 14 ago. 2018 a las 9:01
  • 1
    @Popularfan podrias ser mas especifico? por que no? que explorador utilizas?
    – Txmx
    Commented el 14 ago. 2018 a las 9:06
  • Uso los navegadores de Android
    – Popularfan
    Commented el 14 ago. 2018 a las 9:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.