Ir al contenido principal

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 y HTML esto puede ser posible.
 

Método 1:

 Podemos utilizar el atributo onkeypress devolviendo el valor de false, si es que se escribe un caracter distinto a la cadena que hemos definido (para el ejemplo es " áéíóúabcdefghijklmnñopqrstuvwxyz").


 

Método 2:

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.    

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.

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


Comentarios

  1. Genial script amigo, muchas gracias.
    Solo me ocurre un error y es que no toma en cuenta las teclas especiales en Firefox.

    A ver si encuentro el fallo. Gracias

    ResponderEliminar
    Respuestas
    1. ambos ejemplos permiten el carácter "%" que no es ni letra ni número

      Eliminar
    2. Este codigo tiene muchos años. Lo que puedes hacer es cambiar los caracteres especiales y quitarle el 37

      Eliminar
  2. Exactamente no me funciona el Tab(9) y los arrows (37,39)...

    ResponderEliminar
    Respuestas
    1. Pues si tienes razón, solo que había olvidado poner las llaves de la línea 11 a 14.
      Ya esta solucionado debería funcionar correctamente. Saludos

      Eliminar
    2. Diego estamos para ayudar. Saludos

      Eliminar
  3. Genial Franz, no me di cuenta yo tampoco. Gracias de nuevo, tu script es buenísimo. Un saludo

    ResponderEliminar
  4. hola me gustaria saber como declaro y valido un campo q puede tener texto(RT-AS) o puede ten er texto y autoseguido numero(RA-123)?

    ResponderEliminar
  5. me refiero a q despues de un texto con el guion va otro texto

    ResponderEliminar
    Respuestas
    1. En la linea 5 del código esta la variable con todas la letras que quieras que se acepten, si quieres el guión entonces sólo agrégalo al final, así:

      letras = " áéíóúabcdefghijklmnñopqrstuvwxyz-";

      Eliminar
  6. genial tu codigo, funciona, pero copias numeros, control+C, control+v, entonces el formulario no valida nada, como podrias arreglar esta situacion?

    ResponderEliminar
  7. Hola Nestor para eso podrías poner una función al atributo onblur de la etiqueta intput


    Este es el nuevo input:
    < input type="text" id="f" onkeypress="return soloLetras(event)" onblur="validar()">


    Esta es la función validar() que también debes agregar:
    function validar(){
    var val = document.getElementById("f").value;
    var tam = val.length;
    for(i=0;i<tam;i++){
    if(!isNaN(val[i]))
    document.getElementById("f").value='';
    }
    }

    ResponderEliminar
  8. HOLA Franz Gualambo

    GRACIAS POR TU GRAN APORTE PORQUE YO TAMBIEN VALIDABA CON DICHA FUNSION Y ESTABA CONVENCIDO QUE ERA TOTALMENTE SEGURA HASTA QUE VI ESTE FORO.

    MI PREGUNTA ES POR QUE EL CODIGO QUE TU HAS PUESTO NO ME FUNSIONA SI LO PASO ASI COMO ESTA AQUI, Y AUN ASI PERMITE PEGAR CARACTERES NO DESEADOS


    GRACIAS

    ResponderEliminar
    Respuestas
    1. Ya agrege algo a este post, puedes ver el codigo que he agregado .
      Saludos.

      Eliminar
  9. TU SCRIPT ME SIRVIO A LAS MIL MARAVILLAS MUCHAS GRACIAS!!!

    ResponderEliminar
  10. no funciona en firefox el segundo ejemplo, el de solo numeros

    ResponderEliminar
  11. hola Franz no miro el codigo que dices que has agragado

    ResponderEliminar
    Respuestas
    1. esta en el post (es el ultimo)

      Eliminar
    2. amigo pero para un formulario php, es igual?
      jaja eso no funciono

      Eliminar
  12. Franz segun entiendo esta funcion no de be de permitir copiar caracteres numericos en una caja de texto lo he probado y siempre me deja copiarlo de ante mano de agradesco por responder.


    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='';
    }
    }

    ResponderEliminar
    Respuestas
    1. Aparte de esa funcion debes agregarle el atributo onblur="limpia()" al campo de texto así como esta en el codigo del post.
      Ademas esta funcion no es que no te permita copiar sino esque al salir de foco el campo de texto se vuelve vacio

      Eliminar
  13. es correcto Franz todo bien gracia una ultima pregunta cual es la sintaxi para pasar una varible php como parametro en una funcion java escript

    ResponderEliminar
  14. Gracias Fran sos una vestia en el buen centido de la palabra creo que desde hoy sere un fiel seguidor de tus post y si puedo ayudar me uno

    ResponderEliminar
  15. Excelente amigo Franz me pregunto eso esta muy bien pero si en tu caja de texto pegas los caracteres especiales lo permite abra algun modo de que esto no pase?

    ResponderEliminar
    Respuestas
    1. que pege el usuario es algo que no vas a poder evitar , pero al momento salga del foco del campo de texto se limpia el campo de texto

      Eliminar
  16. Buenas tardes Franz necesito validar un input tipo submit que utilizo para eliminar registro de la base de dato y me gustaria validar que cuando el usuario haga clip en el boton eliminar
    me mande un mensage con la opcion yes o no si elije yes que elimine de lo contrario que resetee

    ResponderEliminar
    Respuestas
    1. Puedes usar "confirm" de javascript
      http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm

      Eliminar
  17. Hola Franz tengo un problema para validar un formulario desde el lado del servidor estoy trabajando con php. quiero validar que si un campo no cumple con los requisito, que me mande nuevamente al formulario pero sin perder el texto en el resto de la caja de texto
    ATTJimmy Diaz

    ResponderEliminar
    Respuestas
    1. cuando dices que no se pierda el texto en las cajas, te refieres a que no haga el submit?

      Eliminar
  18. no el formulario ya se ha en viado a lado del servidor entonces. en la del servidor valido los datos de entrada por ejemplo



    if ($_POST["Titulo"]==""||(strlen($_POST["Titulo"])<'20')||(strlen($_POST["Titulo"])>='100'))
    { cajanombre=cajanombre;
    caja titulo=caja_titulo;
    header("Location:miformulario")
    }




    entonce lo que yo necesito es que si no cumple con los requicito que me envie nuevamente al formulario pero sin que se pierda el con tenido de las cajas de texto

    es decir en otros lenguaje como visual basic
    es haci

    sino cumple la condicion
    variable_titulo=variable_titulo;
    y de esa manera
    me regresa al formulario sin perder el contenido de la caja de texto no se si me explico
    ATT:Jimmy Diaz

    ResponderEliminar
    Respuestas
    1. Bueno ahora no conosco algo asi .
      Pero mejor seria que valides con javascript para que no haga el submit y no recarge la pagina y se quede los texto de las cajas asi como estaba llenada

      Eliminar
  19. Hola! Muy buen post pero creo que en ambos casos acepta ---> "%" ¿Cómo soluciono eso?

    ResponderEliminar
    Respuestas
    1. Si, si te das cuenta también funciona el punto "."
      ya solucione el problema, por falta de tiempo no puedo subir el código, pero ya en estos dias estare subiendo algo más completo y tambien hacer en jquery.
      Saludos

      Eliminar
    2. es verdad! crees que puedas mandarme la solución?, igual y a mi email agnux7@gmail.com de verdad que te lo agradecerías bastante :)

      Eliminar
  20. Excelente Código Me funciono a la Perfección Muchas Gracias

    ResponderEliminar
  21. Que raro no me funcionan los acentos, tendre algo mal?

    ResponderEliminar
  22. hola quiero el codigo para introdicir solo numeros y no letras en javascript porfa te lo agradecere diablita204_4@hotmail.com

    ResponderEliminar
    Respuestas
    1. solo debes de cambiar la variable letras de la linea 5
      letras = '0123456789';

      Eliminar
    2. ola franz, una duda cuando uno cambia las letras por numero e ingresas los numero cuando damos clic en otro texto tambien se borran los numeros

      Eliminar
    3. Ante todo muchas gracias por el aporte y felicitaciones a mi me pas lo mismo cuando cambio a numeros la funcion limpiar limpia los números
      ----

      function soloLetras(e) {
      key = e.keyCode || e.which;
      tecla = String.fromCharCode(key).toLowerCase();
      letras = "0123456789";
      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("c_ruc").value;
      var tam = val.length;
      for(i = 0; i < tam; i++) {
      if(!isNaN(val[i]))
      document.getElementById("c_ruc").value = '';
      }
      }


      Eliminar
    4. Pues justamente la funcion limpia debes cambiarla, si limpia los numeros entonces debes limpiar lo que no son numeros.

      Cambia esta linea
      if(!isNaN(val[i]))

      por esta

      if(isNaN(val[i]))

      Eliminar
  23. como le are para que salgan una "alert" al querer introducir numeros

    ResponderEliminar
  24. ESTA MUY BUENO,, YO LO IMPLEMENTE Y ME GUSTO MUCHO.. LE AGREGUE NÚMEROS Y EL GUIÓN.. JJJJEJEJEJ

    GRACIAS A DIOS POR USTED....

    ResponderEliminar
  25. Buenos Días, la función tiene un problema tambien acepta los caracteres de pto (.) y las comillas simples (').....

    ResponderEliminar
  26. asi es, no sirve de mucho contra inyecciones sql si deja pasar las comillas simples... alguna solucion?

    ResponderEliminar
    Respuestas
    1. Validar el campo por medio de javascript no te asegura que no te hagan inyecciones SQL por mas que no te permita usar comillas simples, porque desactivando el javascript del navegador se podría escribir cualquier tecla sin problemas.
      Ahora eso de protegerte de las inyecciones SQL deberías hacerlo por medio de Backend con lenguajes como PHP.

      SALUDOS

      Eliminar
  27. Hola me funciono perfectamente pero al usar ese mismo codigo en un php que contiene unos divs dinamicos ya no me funciona podrias decirme por que????

    ResponderEliminar
  28. Hola... muy bueno el código!!!
    necesito el que no acepta los puntos.. podrias subirlo porfa??

    ResponderEliminar
  29. Hola, buenas tardes... está función me va casi de perlas, pero necesito algo raro que me están pidiendo, necesito validar un campo dirección de correo electrónico, que no puede empezar con números, pero si puede tener numero después de una letra

    Ejemplo

    1234usuario@mail.com (No es válido)
    usuario1234@mail.com (es válido)

    Muchas gracias por la respuesta

    ResponderEliminar
    Respuestas
    1. Lo mejor seria que uses expresiones regulares para validar emails validos
      http://fgualambo.blogspot.com/2011/09/expresiones-regulares-javascript.html

      Eliminar
  30. que tal franz

    en este código debo ingresar solo símbolos, tu me podrías ayudar?

    if (formulario.nombre.value.length==0) {
    window.alert("Debe escribir su nombre");
    document.formulario.nombre.value.focus();
    document.formulario.apellido.value.select();
    return (false);
    }
    if (formulario.apellido.value.length==0) {
    window.alert ("Debe escrbir su apellido");
    document.formulario.apellido.value.focus();
    document.formulario.apellido.value.select();
    return (false);

    ResponderEliminar
    Respuestas
    1. En el codigo que he puesto en el articulo puedes elegir los caracteres permitidos, solo debes ver la forma de aplicarlo a tu proyecto.
      Saludos

      Eliminar
  31. hola.. en esta linea :" key = e.keyCode || e.which; " me aparece un error
    "syntaxError: missing } in XML expression: (on column 31) "
    como lo puedo solucionar?

    ResponderEliminar
  32. Carnal, cgun la tabla de simbolos la tecla delete es el numero 46, pero no funciona, investigue y lo cambie x el numero 8 y funciona a la perfeccion x si alguno tiene problemas =

    ResponderEliminar
  33. Muchas gracias, compañero!!! Un script genial!

    ResponderEliminar
  34. Amigo una preguntota, estoy tratando de usar tu codigo para validar un campo, en el que quiero NUMEROS Y LETRAS,pero al dar un clic fuera del input me borra el contenido cuando este contiene NUMEROS, al final lo he modificado asi, y ya no me borra el contenido cuando doy clic fuera, pero lo que si me permite es introducir el caracter '%',como lo puedo restringir tambien? Agradecria mucho tu resputesa. te dejo el codigo como lo modifique:

    function soloLetras(e) {
    key = e.keyCode || e.which;
    tecla = String.fromCharCode(key).toLowerCase();
    letras = "abcdefghijklmnñopqrstuvwxyz1234567890";
    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;
    }

    ResponderEliminar
  35. Hola, necesito evitar que se introduzcan espacios en blanco, como lo hago?. Salu2.

    ResponderEliminar
  36. Simplemente quita el caracter espacio :

    letras = "abcdefghijklmnñopqrstuvwxyz1234567890";

    ResponderEliminar
  37. ola amigo en el caso de no mas ingresar numero q canbio

    ResponderEliminar
  38. Buenos dias, a mi me funciona perfecto en mozilla el codigo pero en I.E, no funciona, iagual me acepta los puntos, comas , etc

    ResponderEliminar
  39. Buenas noches Franz, muy bueno tu post me ayudaste mucho validando campos...

    una pregunta, estoy haciendo un formulario para control de notas y no se como validar los campos de texto para que solo puedan agregar las I (que significa inasistente), NP (no presento) y las notas del 01 hasta el 20...

    ¿Qué debo hacer para validarlos?

    ResponderEliminar
    Respuestas
    1. pues tu cadena de letras debería ser
      letras = "INP0123456789";

      Eliminar
  40. amigo como hago para k solo me acepte la fecha 00/00/0000. resaltando k solo se puede escribir "dia 2 numeros", "mes 2 numeros" y "año 4 numeros"

    ResponderEliminar
  41. Muchisimas Gracias, me funciono perfectamente!

    ResponderEliminar
  42. tu codigo me interesa. tengo una inquietud, tengo un campo < type="text" onkeypress="return mayuscula(event)" id="miInput"> lo utilizo para código de productos 'AA-152' es decir cuando ingresa texto minúsculo automáticamente se cambia a mayúscula. también puede ingresar números y variables(-_). otras de las cosas que en el texto estoy escribiendo el valor "AA-152" y el usuario selecciona con el mouse solo el texto A-1 y cuando preciosa cualquier letra como ejemplo "Q" entonces saldría "AQ52" porq he seleccionado el TEXTO "A-1" y al presionar el texto "Q" lo reemplaza a "AQ52"

    ResponderEliminar
  43. Gracias man me ayudo mucho mil gracias

    ResponderEliminar
  44. Ḿuy bueno, solo que me deje ingresar tilde y comillas simples (apretando la tecla de tilde solo una vez y luego la barra espaceadora).

    ResponderEliminar
  45. Muchas gracias por el aporte. Era justo lo que necesitaba saludos.

    ResponderEliminar
  46. gracias era exactamente lo que buscaba me funciono perfecto, muy buen post

    ResponderEliminar
  47. Hola!! Disculpa tengo una gran duda estoy usando el codigo de solo letras pero me han encargado que cuando presione un numero no solo esten bloqueados, si no que me de un alert y me diga que "No se aceptan numeros" :( podrias ayudarme?

    ResponderEliminar
  48. 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 = '';
    }
    }

    /*if(isNaN(val[i])) corregido para numero linea que limpia letras*/

    ResponderEliminar
  49. Gracias, me fue de mucha ayuda junto con tu explicacion.

    ResponderEliminar
  50. Hola tengo una duda use tu código y todo funciona perfecto excepto que la función limpiar si impide que copie y peque números en un input text, el detalle es que no me deja agregar espacios, si quito la función limpiar si me deja pero al ponerla también me bloquea los espacios y necesito que permita los espacios en ese input

    ResponderEliminar
  51. function sololetras(evento){
    key = evento.keyCode || evento.which;
    teclado = String.fromCharCode(key).toLocaleLowerCase();
    letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
    especiales = " 8-32-37-38-39-46-164";

    teclado_especial = false;
    for (var i in especiales) {
    if (key == especiales[i]) {
    teclado_especial = true; break;
    }
    }
    if (letras.indexOf(teclado) == -1 && !teclado_especial) {
    return false;
    }
    }
    function limpia() {
    var val = document.getElementById("nombre").value;
    var tam = val.length;
    for(i = 0; i < tam; i++) {
    if(!isNaN(val[i]))
    document.getElementById("nombre").value = '';
    }
    }

    ResponderEliminar
    Respuestas
    1. Disculpa y si no quiero acentos

      Eliminar
    2. si no quieres acentos no los pongas en los caracteres de la variable "letras"

      Eliminar
  52. gracias amigo
    pero tengo un pregunta
    como puedo hacer para dejar que me acepte - el guion?

    ResponderEliminar
    Respuestas

    1. letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
      Esa es la variable de caracteres permitidos. No debería permitirte el guion

      Eliminar
  53. Genial me sirvió mucho gracias

    ResponderEliminar
  54. Hola Franz, me encuentro que en tu ejemplo de codesandbox escribiendo normal si pones un espacio también limpia la casilla, quiero aplicarlo pero me pasa lo mismo, gracias por tu ayuda.

    ResponderEliminar
  55. Aunque como carácter especial se encuentre el espacio (32)
    especiales = " 8-32-37-38-39-46-164";
    y en letras también pongamos un espacio
    letras = " áéíóúabcdefghijklmnñopqrstuvwxyz";
    el campo de texto siempre limpia cualquier texto que introduzcamos con un espacio.

    Alguien sabe como solventar este problema?
    Gracias

    ResponderEliminar
    Respuestas
    1. Cambia la función limpia por esta función

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

      Eliminar
  56. Hola Franz, y gracias por tu ayuda.
    La modificación

    if (!isNaN(val[i]) && val[i] != " ")

    solventa el problema del espacio,
    pero permite copiar y pegar.

    ResponderEliminar
  57. Perfecto, todo Franz, muchísimas gracias por tu aporte. Sólo tengo una duda. Como mi proyecto va a ser internacional, modifique la expresión regular asi:
    letras = " áéíóúabcdefghijklmnñopqrstuvwxyzÁÉÍÓÚäëïöüÄËÏÖÜàèìòùÀÈÌÒÙ",
    y aún añadiendo los acentos, me sigue sin permitirme escribir acentos a la vez que escribes tu nombre. Como mis inputs son para nombres, si por ejemplo intentas escribir: Raúl ... no te permite añadir el acento a la vez que escribes el nombre. ¿Me podrías orientar sobre como solucionarlo?. Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Leo, podrías compartir un poco tu código?

      Eliminar
    2. function soloLetras(e) {

      var 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;
      }
      }

      Este es el código Franz

      Eliminar
    3. Hola Leo, acabo de probar tu código y si me funciona. Quizás es un tema de tu teclado. Intenta escribir en otro lado (en un Word por ejemplo) acentos con vocales. Comentame como te fue.

      Eliminar
    4. Perdona Franz, pero no es un problema del teclado, ya que he probado en otros inputs de mi formulario y si puedo escribir acentos. Algo en el código me esta bloqueando esta acción. He probado de poner "Raúl" en otro input y al hacer Copy+Paste y colocarlo en el input de Nombre, me lo coge. Este es el código HTML de mi input: input id="nombreLeft" name="nombreLeft" type="text" size="25" onkeypress="return soloLetras(event)" onblur="valeft()"

      Eliminar
    5. Franz ya lo solucioné, jajajja, menuda chorrada, perdona, pero en la llamada a la función he sustituido el parámetro (event) por simplemente (e) y ahora me coge los acentos!! Perdona por las molestias!! Un saludo.

      Eliminar
    6. Hola Leo, si a veces pasa ese tipo de errores, pero lo bueno es que practicando así, te vas convirtiendo en un experto. Felicidades por la solución =)

      Eliminar
    7. Feliz Año 2021 Franz, y perdona por la molestia, pero después de solucionar un problema que tuve con mi DB, me he dado cuenta de una par de asuntos con el código. ¿Sabes si la función sirve para dos inputs distintos?, es que me funciona correctamente en "valeft" pero en cambio en "valright" cuando añado un nombre compuesto como pudiera ser "María José" al cambiar el "focus" me lo limpia, y no sé donde esta el problema?¿?. Mi segunda cuestión es: ¿el patrón letras sólo permite las letras establecidad?, porque me he dado cuenta, de que el input acepta carácteres como interrogantes, barras, etc, cosa que quiero evitar a toda costa, ¿sabes como podría solucionarlo?. Te dejo el código completo, para que lo examines:

      function soloLetras(e) {

      var 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;
      }
      }

      // -- Función para aceptar espacios -- //
      function valeft(){

      var val = document.getElementById("nombreLeft").value;
      var tam = val.length;
      // limpia el campo si hay número y respeta espacios
      for(i=0;i<tam;i++){
      if(!isNaN(val[i]) && val[i] != " ")
      document.getElementById("nombreLeft").value='';
      }
      }

      // -- Función para aceptar espacios -- //
      function valright(){

      var val = document.getElementById("nombreRight").value;
      var tam = val.length;
      // limpia el campo si hay número y respeta espacios
      for(i=0;i<tam;i++){
      if(!isNaN(val[i]) && val[i] != " ")
      document.getElementById("nombreRight").value='';
      }
      }

      Un saludo y gracias de antemano!! ;-)

      Eliminar
    8. Hola Leo, debe ser que tienes la funcion llamada "limpia". Podrías compartir el html de tus 2 inputs para analizarlo?

      Eliminar
  58. Hola yo tenia este mismo script pero como le hago para validar la cantidad mínima y máxima de caracteres que debe introducir un usuario!?

    ResponderEliminar
    Respuestas
    1. Utiliza mejor el maxlength y el minlength de HTML

      Eliminar
  59. Hola, me ayudo bastante este ejemplo, tengo un input que no debe permitir ingresar mayúsculas ni caracteres especiales y ya lo logre siempre que se ingresen manualmente; pero quiero utilizar la función de limpiar y no esta limpiando ni al dar clik fuera ni al presionar mis botones ¿ que podría ser que estoy errando?


    function limpia() {
    var val = document.getElementById("input-texto").value;
    var tam = val.length;
    for(i = 0; i < tam; i++) {
    if(!isNaN(val[i]))
    document.getElementById("input-texto").value = '';
    }
    }
    }
    id="input-texto" placeholder="Ingrese el texto aqui" onkeypress="return soloLetras(event)" onblur="limpia()">


    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

La propiedad Disabled en Javascript

Como atributo de un elemento HTML Ejemplo: "Solo añadiendo el atributo disabled". < input type = "button" value = "Desactivado" disabled /> < input type = "text" disabled /> < input type = "button" value = "Boton normal" /> Demostración: El botón y el campo de texto están desactivados Manipulando Disabled usando Javascript Ejemplo 1: Utilizando el "id" del campo de texto en este caso "miText". < script type = "text/javascript" > function Desactivar () { document . getElementById ( 'miText' ) . disabled = true ; } < /script > < input type = "button" value = "Desactivar" onclick = "Desactivar()" / > < input type = "text" id = "miText" / > Demostración: Dándole clic al botón se desactiva el campo de texto. Ejemplo 2:Utilizando el event

Validar campo de texto con javascript

Obligar al usuario a introducir un valor en un campo de texto perteneciente a un formulario se puede hacer de la siguiente manera con javascript. Código < script type = "text/javascript" > function validar () { //obteniendo el valor que se puso en campo text del formulario miCampoTexto = document . getElementById ( "miCampo" ) . value ; //la condición if ( miCampoTexto . length == 0 ) { return false ; } return true ; } </ script > < form action = "mipagina.php" onsubmit = "return validar()" > < input type = "text" id = " miCampo " name = "miCampo" > < br > < input type = "submit" value = "Enviar" > </ form > miCampoTexto.length -> indica el número de caracteres del texto introducido En esta validación los usuarios deben llenar los campos