Como validar campo de texto solo Letras y solo Números con Javascript

En ocasiones necesitamos validar los campos de texto o campos numéricos, los navegadores nos ofrecen opciones pero no son tan estrictas y no sirven para todos. Javascript se ha vuelto una herramienta práctica que ayuda a realizar tareas sencillas, estas tareas de procesamientos de texto y caracteres introducidos en un formulario es a lo que nos vamos a referir en este post.

Comenzamos con la función que va a validar solo letras.

Function LETRAS Javascript

//Se utiliza para que el campo de texto solo acepte letras
function soloLetras(e) {
    key = e.keyCode || e.which;
    tecla = String.fromCharCode(key).toString();
    letras = " áéíóúabcdefghijklmnñopqrstuvwxyzÁÉÍÓÚABCDEFGHIJKLMNÑOPQRSTUVWXYZ";//Se define todo el abecedario que se quiere que se muestre.
    especiales = [8, 37, 39, 46, 6]; //Es la validación del KeyCodes, que teclas recibe el campo de texto.

    tecla_especial = false
    for(var i in especiales) {
        if(key == especiales[i]) {
            tecla_especial = true;
            break;
        }
    }

    if(letras.indexOf(tecla) == -1 && !tecla_especial){
alert('Tecla no aceptada');
        return false;
      }
}

Para validar solo números es la siguiente función:

Function NÚMEROS Javascript

//Se utiliza para que el campo de texto solo acepte numeros
function SoloNumeros(evt){
 if(window.event){//asignamos el valor de la tecla a keynum
  keynum = evt.keyCode; //IE
 }
 else{
  keynum = evt.which; //FF
 } 
 //comprobamos si se encuentra en el rango numérico y que teclas no recibirá.
 if((keynum > 47 && keynum < 58) || keynum == 8 || keynum == 13 || keynum == 6 ){
  return true;
 }
 else{
  return false;
 }
}

La mejor forma de llamar estas funciones en nuestro código html es la siguiente:

//para la función solo numeros
<label>Números:</label>
<input  id="Identificacion" name="Identificacion" style="width:300px; margin-left:2px " required onKeyPress="return SoloNumeros(event);">

//para la función solo letras
<label>Letras:</label>
<input  id="Nombre" name="Nombre" required onkeypress="return soloLetras(event);" onKeyUp="this.value = this.value.toUpperCase();">

El onKeyUp="this.value = this.value.toUpperCase(); se utiliza para que todas las letras digitadas se vuelvan mayúsculas.

Demostración:

Prueba los campos de texto a continuación con letras y números
Números:

Letras:

Esta es una lista con los Key Codes para usar en las funciones de acuerdo a como lo requieran.

KEY CODE backspace 8 tab 9 enter 13 shift 16 ctrl 17 alt 18 pause/break 19 caps lock 20 escape 27 page up 33 page down 34 end 35 home 36 left arrow 37 up arrow 38 right arrow 39 down arrow 40 insert 45 delete 46 0 48 1 49 2 50 3 51 4 52 5 53 6 54 7 55 8 56 9 57 a 65 b 66 c 67 d 68

KEY CODE e 69 f 70 g 71 h 72 i 73 j 74 k 75 l 76 m 77 n 78 o 79 p 80 q 81 r 82 s 83 t 84 u 85 v 86 w 87 x 88 y 89 z 90 left window KEY 91 right window KEY 92 select KEY 93 numpad 0 96 numpad 1 97 numpad 2 98 numpad 3 99 numpad 4 100 numpad 5 101 numpad 6 102 numpad 7 103

KEY CODE numpad 8 104 numpad 9 105 multiply 106 add 107 subtract 109 decimal point 110 divide 111 f1 112 f2 113 f3 114 f4 115 f5 116 f6 117 f7 118 f8 119 f9 120 f10 121 f11 122 f12 123 num lock 144 scroll lock 145 semi-colon 186 equal sign 187 comma 188 dash 189 period 190 forward slash 191 grave accent 192 open bracket 219 back slash 220 close braket 221 single quote 222