Problema con input Text...

[dfmex]

Hola de nuevo a todos!;

Fijense que intento que en una entrada de texto solo se puedan escribir letras y espacios, pero no puntos, comas o cualquier otra cosa....

Leyendo en los foros encontré este código de JavaScript:

Código HTML:

function validar(e) {
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla==8) return true;
    patron =/[abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ\s]/;
    te = String.fromCharCode(tecla);
    return patron.test(te);
}

El problema es que, cuando lo corro en efecto no me deja escribir mas que letras, EXCEPTO LA Ñ, es decir que de la A a la Z mayúsculas o minusculas las puedo escribir, al igual que el espacio para separar palabras, pero no la Ñ... no me deja


Mi inputfield está así:

Código HTML:

<input name="Nombre" type="text" style="font-family: Calibri; font-size: 10pt; text-align: center;" onkeypress="return validar(event)" /> 

No sé si alguien me pudiera ayudar a detectar el error o que puedan compartirme un script para validar los text fields para solo letras pero que si admita la ñ y letras acentuadas....

Muchas gracias de antemano

[zerokilled]

me extraña que no te funcione porque lo comprobe y me funciona en varios navegadores. para las vocales acentuadas tienes que agregarla manualmente en el patron, tanto minuscula como mayusculas. especificamente dentro de la siguiente lista

Código:

[abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ\s]

[dfmex]

Hola Zero...

Fijate que ya me funciona... no sé por que, pero no funciona cuando lo tienes en archivo JS y lo llamo desde html con el

Código:

<script type="text/javascript" src="sololetras.js"></script>

no me deja escrbir la ñÑ... pero cuando pongo el codigo directamente en HTML si me acepta la Ñ y letras...

Que raro...

Bueno, gracias :)

[JavierB]

Hola dfmex

Pues sí, eso es muy, muy raro. ¿seguro que está bien la ruta del .js? Prueba poniendo un alert en la función, a ver si se ejecuta.

Saludos,

[zerokilled]

codigo externo o integrado no tiene mucha importancia. quizas queras ponerlo en linea, con html y javascript separados en archivos, para poder comprobar la razon. hice la prueba en local y me sigue funcionando correctamente.

[dfmex]

El problema de la Ñ lo desconosco, pero poniendo el codigo directamente ya funciona, como quiera que sea ya está bien.

Solo que tengo un problema :(... No puedo tabular en los campos que contienen dicha condición... es decir, puedo tabular en los que no tengo restricción pasando al siguiente campo con la tecla tabular PERO no en los que les puse el onkeypress para que valide solo letras...

¿Qué condicion al código podría implementar para hacer esto posible?

Gracias de antemano por sus respuestas

[zerokilled]

Código:

    if (tecla==8) return true;

en esa linea, a la condicion le agregas "o tecla igual a 9". claro, no digo que tienes que agregarlo literalmente asi, traducelo a javascript.

[dfmex]

M... le puse así:

Código:

    if (tecla == 8) { return true; }
    else if (tecla==9) {return true; }

Y no me funcionó... normalmente en PHP haría algo así:

Código:

    if (tecla == 8 || tecla == 9) { return true; }

Pero tampoco funcionó...

¿Cómo indico la condición OR o AND en un IF en JavaScript??

[dfmex]

Bueno, encontré en los foros una solución final, que sería esta:

Código:

function validar(e) { 
   tecla = e.which || e.keyCode; 
   patron =/[abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZáéíóúÁÉÍÓÚ\s]/;
   te = String.fromCharCode(tecla); 
   return (patron.test(te) || tecla == 9 || tecla == 8);  
 }

Con esto puedo aceptar letras acentuadas, ñÑ la tecla de retroceso y la tecla tabuladora...


Solo me gustaría hacer una consulta final...

¿Cual es el numero de letras que les corresponde a la tecla SUPRIMIR/DELETE y las fechitas <-- y -->?

Me gustaría que estén disponibles porque a veces es mas facil asi retroceder 2 letras cuando se nos olvido escribir una, o algo asi por el estilo.

[zerokilled]

DELETE = 46
BACKSPACE = 8
LEFT_CURSOR = 37
RIGHT_CURSOR = 39

mi opinion, siempre he preferido validar por contenido en lugar de teclas.

[dfmex]

Iniciado por zerokilled

DELETE = 46
BACKSPACE = 8
LEFT_CURSOR = 37
RIGHT_CURSOR = 39

mi opinion, siempre he preferido validar por contenido en lugar de teclas.

Muchas Gracias Zero por tus respuestas, me han ayudado mucho

[zerokilled]

a continuacion un script que recien realice porque necesitaba ver unas diferencias que no tenia en claro. lo puedes usar para identificar el valor numerico que representa una tecla segun el evento.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
function key(evt, id) {
var evt = evt || event;
var inputs = document.getElementById(id).getElementsByTagName("input");
inputs[0].value = evt.keyCode;
inputs[1].value = String.fromCharCode(evt.keyCode);
inputs[2].value = evt.which;
inputs[3].value = String.fromCharCode(evt.which);
}

document.onkeypress = function(evt){
key(evt, "press");
}

document.onkeyup = function(evt){
key(evt, "up");
}

document.onkeydown = function(evt){
key(evt, "down");
}
</script>
<style type='text/css'>
body{
font-family:georgia;
background:#111 url(http://img404.imageshack.us/img404/3279/firebug.jpg) no-repeat -2em 21em;
color:#fff;
margin:1em;
margin-left:4em;
}

p{
text-align:right;
width:40em;
}

.section{
border-top:1px dotted #333;
padding-top:2em;
}

span{
display:inline-block;
width:6.65em;
text-align:center;
}

input{
width:8em;	
text-align:center;
background:transparent;
border:0;
}

textarea{
width:31.5em;
height:4em;
padding:.25em;
background:#333;
border:1px solid #666;
}

input, textarea{
color:#fff;
font-family:monospace;
}

h1{
font-size:1.75em;
border-bottom:1px solid #333;
}

h2{
float:left;
font-weight:normal;
padding-top:1.75em;
}
</style>
</head>

<body>
<h1>Keys</h1>
<h2>onkey-</h2>
<p class="header"><span>keyCode</span> <span>char key</span> <span>which</span> <span>char which</span></p>

<p id="down">down: <input /> <input /> <input /> <input /></p>
<p id="press">press: <input /> <input /> <input /> <input /></p>
<p id="up">up: <input /> <input /> <input /> <input /></p>
<h2>Type in box</h2>

<p class="section"><textarea></textarea></p>
</body></html>