Cuando desarrollamos aplicaciones, es común que, queramos añadir ciertos grados de seguridad para evitar que valores no deseados se inserten en la base de datos, un campo que telefónico debería aceptar solo números o un campo para ingresar un nombre, debería aceptar solo letras, es por ello que, en este laboratorio vamos a aprender como restringir un campo de texto con los valores que necesitemos, utilizando una función javascript.

Lo primero que debemos hacer es crear una función global en la sección de Function and Global Variable Declaration:

La función que haremos utilizará los keycode de javascript para leer el código de la tecla presionada, puede visitar el siguiente sitio web y presionar cualquier tecla para saber cuál código tiene cada tecla: keycode.info

Los números van en un rango de keycode del 48 al 57, mientras que las letras son del keycode 65 al 90, además debemos incluir el keycode 192 para las ñ.

El campo excludedKeys nos permite añadir teclas que queramos que igualmente se acepten en el campo de texto, como la tecla de espacio, backspace, delete, entre otros.

Función para aceptar solo números
function validateNumber(event) {
  var keyCode = event.keyCode;
  var excludedKeys = [8, 37, 39, 46];//Teclas extra que queremos que el campo acepte aparte de los números, como el backspace
//Realizamos la validación de la tecla ingresada
  if (!((keyCode >= 48 && keyCode <= 57) ||
      (keyCode >= 96 && keyCode <= 105) ||
      (excludedKeys.includes(keyCode)))) {
    event.preventDefault();

  }
}  
Función para aceptar solo letras
function validateText(event) {
  var keyCode = event.keyCode;
  var excludedKeys = [8, 37, 39, 46, 32];

  if (!((keyCode >= 65 && keyCode <= 90) ||
      (excludedKeys.includes(keyCode)))) {
    event.preventDefault();

  }
} 

Luego de haber creado las funciones, debemos colocarnos en el campo de texto al que le queremos hacer la validación y crear una acción dinámica con el evento key down:

En el True condition se debe añadir una action de tipo Execute Javascript y en el source llamaremos el nombre de la función que creamos:

Realizamos la prueba y ahora en el campo Teléfono solo se pondrán colocar números:

Así, podemos restringir el uso de ciertas teclas en los campos de texto de nuestras aplicaciones.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.