Validar campo de texto sólo letras, números con javascript

En algunos casos necesitaremos que el usuario ingrese solamente letras en un campo de texto, impidiendo así el ingreso de números y caracteres especiales. Gracias a Javascript esto puede ser posible.

Pasos a seguir:

  1. Crear una lista con todas las letras permitidas (a,b,c ... etc).
  2. Crear una lista de teclas especiales tales como (BackSpace , flecha izquierda, flecha derecha, Supr) estas son teclas permitidas aparte de las teclas permitidas en el primer paso.
Código

<script>
    function soloLetras(e){
       key = e.keyCode || e.which;
       tecla = String.fromCharCode(key).toLowerCase();
       letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
       especiales = "8-37-39-46";

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

        if(letras.indexOf(tecla)==-1 && !tecla_especial){
            return false;
        }
    }
</script>

<input type="text" onkeypress="return soloLetras(event)">

Entendiendo el código

  • En la línea 4 la sentencia String.fromCharCode(key) obteniene el caracter presionado por el usuario que añadiendo la sentencia toLowerCase() convertiríamos la letra a minúscula. Con esto guardamos la letra presionada por el usuario en la variable tecla (línea 4).
  • En la línea 5 guardamos en la variable "letras" las letras permitidas por nosotros. En la línea 6 guardamos los keyCode de las teclas especiales como (BackSpace , flecha izquierda, flecha derecha, Supr).
  • De la línea 8 a la 15 se busca si está la tecla presionada por el usuario en el array de teclas especiales "especiales"(línea 6)
  • En la línea 17 dentro del condicional hacemos uso de la propiedad indexOf() que averigua si una cadena se encuentra dentro de otra cadena devolviendo como valor la posición de la cadena encontrada o el valor de -1 si es que no la encuentra , que para este caso queremos averiguar si el caracter presionado se encuentra entre las letras permitidas.
  • En la línea 17 diríamos que el condicional retorna falso si la tecla presionada no está en la lista de letras permitidas hecha por nosotros (línea 5).
¿Y si solo quiero permitir números?
Bastaría con cambiar el valor de la variable letras por "0123456789".

Caso extremo...

Si hay algo que no podemos evitar es que el usuario que visite tu página copie y pegue un texto no deseado al campo de texto . Para eso podemos agregarle el atributo "onblur" a la etiqueta input llamando a una función que limpie el campo de texto si es que encuentra un caracter no deseado.

<script>
function soloLetras(e) {
    key = e.keyCode || e.which;
    tecla = String.fromCharCode(key).toLowerCase();
    letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
    especiales = [8, 37, 39, 46];

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

    if(letras.indexOf(tecla) == -1 && !tecla_especial)
        return false;
}

function limpia() {
    var val = document.getElementById("miInput").value;
    var tam = val.length;
    for(i = 0; i < tam; i++) {
        if(!isNaN(val[i]))
            document.getElementById("miInput").value = '';
    }
}
</script>



<input type="text" onkeypress="return soloLetras(event)" onblur="limpia()" id="miInput">
Pruebalo! --> :

Existe una forma más sencilla para realizar esto que se explica en este mismo blog  aquí


Validar campo de texto sólo números, letras etc... con JQUERY

A veces he tenido la necesidad de validar un campo de texto que sólo permita cierto tipo de caracteres como es el caso de documentos(sólo números) o nombres(letras y no números) y tantas combinaciones que requiera un campo de texto para una determinada página web.
Y ya que vamos a utilizar JQUERY hagamos uso de este plugin de jquery muy fácil de utilizar.

$('selector').validCampoFranz('mis-caracteres');


Demostraciones

Campo que acepta sólo números
Campo de acepta sólo letras y espacios

Quieres usarlo en tu proyecto?
Primero descargar el Jquery :
 http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
Segundo descargar el Plugin :
 https://raw.github.com/franz1628/validacionKeyCampo/383dab045bbc992120c4276e9d6f2c3a852f60b9/validCampoFranz.js
<!doctype html>
<html>
   <head>
     <script src="jquery.min.js"></script>     
     <script src="validCampoFranz.js"></script>
       <script type="text/javascript">
            $(function(){
                //Para escribir solo letras
                $('#miCampo1').validCampoFranz(' abcdefghijklmnñopqrstuvwxyzáéiou');

                //Para escribir solo numeros    
                $('#miCampo2').validCampoFranz('0123456789');    
            });
        </script>        
   </head>
   <body>
        <h2>Escribe sólo teclas permitidas</h2>  
        
        Mi Campo 1 <input type="text" id="miCampo1">      
        Mi Campo 2 <input type="text" id="miCampo2">      
   </body>
</html>

Podemos ver acá un tutorial de como utilizarlo.


Obtener nombre y formato de archivo con PHP

Con dos lineas de código podemos sacar el nombre y formato de un archivo. ¡A copiar y a pegar se ha dicho!.

   $archivo = "Franz.jpge";

  $formato = substr( $archivo , strripos( $archivo , "." ) + 1);
  $nombre  = substr( $archivo , 0 , strripos( $archivo , "." ));

  echo $formato;    // "jpge"
  echo $nombre;    // "Franz"

¿Que hace el código?

Utiliza dos funciones, substr y strripos.
Lo que hacemos primero es obtener la ubicación del ultimo punto del nombre total del archivo (puede darse el caso que el nombre total del archivo tenga varios puntos) con la función (strripos) , para después utilizar la funcion de PHP (substr) parar cortar el nombre total del archivo desde la ubicación del punto hasta el final, y así obtenemos el formato!.
Para el nombre del archivo sin el formato, simplemente cortamos el nombre del archivo total desde el inicio hasta la ubicación del punto.