comprobar las letras que se introducen en un input

[jesus1975]

Buenas,
Tengo un pequeño problemilla y yo es que de javascript mas bien poquito. Lo que ocurre es:
Tengo por un lado un campo input el cual lo voy rellenado desde un teclado virtual, hasta aqui todo correcto.
Luego tengo una cadena de texto que llega por php (captcha) que lo tengo guardado en $cadena,

y yo lo que quisiera hacer es conforme el usuario va pulsando teclas del teclado virtual vaya comprobando mediante javascript si la letra introducida es la que corresponde al captcha y le lanze un mensaje al usuario de correcto o incorrecto segun vaya escribiendo.

No se si me he explicado bien... cualquier duda decirme y os comento.

Gracias de antemano y saludos

[goteen_mx]

Yo creo que pedería la escencia del Captcha, ya que con un ataque de fuerza bruta suponiendo un alfabeto de 27 letras y una longitud de clave de 5 tendrías

27*27*27*27*27 posibles combinaciones o sea 27^(tamaño de clave)
en cambio si le indicas si esta correcto o no al momento de escribir cada caracter, tendrias
27+27+27+27+27 combinaciones = 27 * (tamaño de clave)

Saludos.

[charly_vc]

Eso es muy sencillo de hacer, lo que se me ocurre, seria que la cadena la conviertas en arreglo, despues cada ves que le den un click a un caracter del teclado virtual, mandarias llamar a la funcion de validar el captcha y en esta funcion lo unico que haria, es primero ver que longitud tiene la cadena que se a escrito en el text box y validarias contra la posicion del arreglo de tu captha por ejemplo te dejo un test que solo tendrias que adecuar:

<script>
function validarCaptcha(){

//suponiendo que esta seria tu cadea del captcha.
var cadena = "1,2,3,4,5";

//seguido se hace el split
var miArr = cadena.split(',');

var texto = document.getElementById('tutextbox').value;

if(miArr[texto.length-1] != texto[texto.length-1]){
alert('caracter no valido');
document.getElementById('tutextbox').value=texto.s ubstring(0,texto.length-1);
return false;
}

}
</script>

<input type="text" id="tutextbox" onkeyUp="validarCaptcha()">

[jesus1975]

gracias por vuestras respuestas, si tienes razon respecto al captcha de que perderia un poco de seguridad, pero bueno se trata de un formulario y que si viera que me da problemas lo modificaria y lo haria como se hace siempre.
Realmente no explique el motivo de porque hacerlo de la siguiente manera y es porque la pagina que estoy haciendo incluye idiomas como ruso, chino, arabe y es por eso que he introducido el teclado virtual, lo de que vaya comprobando los caracteres es por comodidad para el usuario, porque resulta muy molesto enviar un formulario y que te devuelva un error de que lo has escrito mal y con este sistema ese paso se lo evito al usuario.

Probare el codigo y te cuento a ver que tal...

Gracias

[jesus1975]

El codigo va casi perfecto, el unico problema que no funciona con el teclado virtual, si lo escribes con el teclado manual va perfecto si el caracter escrito no es el que toca te saca el error pero si lo escribes desde el teclado virtual no tira el alert...

creo que tiene que ver con el onkeyUp... ¿Puede ser?

[goteen_mx]

en un txt puedes ocupar el onchange, o soble tu teclado virtual el onclick

Saludos.

[charly_vc]

Que tal Jesus!!

El ejemplo que te pase es solo para que te des una idea de como seria la validacion, lo que necesitas hacer es que en cada boton de tu teclado agregarle el evento onClick mandando llamar a esta funcion por ejemplo si tienes algo asi como

<input type="button" id="1" onClick="validarCaptcha(this.id); return false;" />
<input type="button" id="2" onClick="validarCaptcha(this.id); return false;" />
.
.
.

y lo que debes de hacer en la funcion, seria agregarle que reciba un parametro por ejemplo:

function validarCaptcha(keypress){

document.getElementById('tutextbox').value=documen t.getElementById('tutextbox').value+keypress;

//suponiendo que esta seria tu cadena del captcha.
var cadena = "1,2,3,4,5";

//seguido se hace el split
var miArr = cadena.split(',');

var texto = document.getElementById('tutextbox').value;

if(miArr[texto.length-1] != texto[texto.length-1]){
alert('caracter no valido');
document.getElementById('tutextbox').value=texto.s ubstring(0,texto.length-1);
return false;
}

}

Saludos desde Guadalajara

[jesus1975]

No me termina de funcionar esto.... dejo el codigo a ver si alguien me puede echar una manita....

Por un lado las funciones... en el momento de añadirle a la funcion validar Capcha el parametro keypress cuando no se introduce el caracter que corresponde apararece en el input undefined

function validarCaptcha(keypress){
document.getElementById('Imagen').value=document.g etElementById('Imagen').value+keypress;
var cadena = "<?php echo $cadena;?>";
var miArr = cadena.split('');
var texto = document.getElementById('Imagen').value;
if(miArr[texto.length-1] != texto[texto.length-1]){
alert('caracter no valido');
document.getElementById('Imagen').value=texto.subs tring(0,texto.length-1);
return false;
}
}
texto="";
var Tletras=new Array ("q","w","e","r","t","y","u","i","o","p","a","s"," d","f","g","h","j","k","l","&ntilde;","z","x","c", "v","b","n","m");
var z=0;
var mayus=true
function anadir(letra){
texto=document.form.Imagen.value;
if(letra=="\b"){
numeroLetras=texto.length-1
texto=texto.substring(0,numeroLetras);
} else {
if(!mayus){letra=letra.toLowerCase()}
texto=texto+letra;
}
document.form.Imagen.value=texto;
}

y por otro lado el div donde se muestra el teclado virtual

<div id="botones" align="center" style="line-height:32px;"></div>
<script>
var letras="";
var p=0;
for (a=0;a<Tletras.length;a++){
letras=letras+"<input id="+Tletras[a]+" style='width:40px; cursor:pointer; padding-bottom:2px; font-weight:bold; color:#268DE1;' type='Button' value="+Tletras[a]+" onclick=anadir('"+Tletras[a]+"'); validarCaptcha(this.id); return false;>&nbsp;";
p=p+1;
if(p==10){p=0;letras=letras+"<br>";}
}
document.getElementById('botones').innerHTML=letra s+"<input style='width:auto; cursor:pointer; font-weight:bold; color:#268DE1; padding-bottom:2px;' alt='Borrar' type='Button' value='Borrar'; onClick=anadir('\b')></font>";

</script>

cuando lo escribo desde el teclado manual funciona perfectamente... pero desde el teclado virtual no me da el error en caso de que el caracter que he introducido no corresponda...

[jesus1975]

Ya lo he solucionado... al final lo que he hecho es simplemente una funcion para ambas cosas... dejo el codigo por si a alguien le pudiera interesar algun dia....

texto="";
var Tletras=new Array ("q","w","e","r","t","y","u","i","o","p","a","s"," d","f","g","h","j","k","l","&ntilde;","z","x","c", "v","b","n","m");
var z=0;
var mayus=true
function anadir(letra){
texto=document.form.Imagen.value;
if(letra=="\b"){
numeroLetras=texto.length-1;
texto=texto.substring(0,numeroLetras);
} else {
if(!mayus){letra=letra.toLowerCase()}
texto=texto+letra;
}
document.form.Imagen.value=texto;
var cadena = "<?php echo $cadena;?>";
var miArr = cadena.split('');
var texto = document.getElementById('Imagen').value;
if(miArr[texto.length-1] != texto[texto.length-1]){
alert('caracter no valido');
document.getElementById('Imagen').value=texto.subs tring(0,texto.length-1);
return false;
}
}

gracias por todo

[charly_vc]

Que bien que lo hayas solucionado y que hayas agregado un poco de tu codigo para aquellos que necesiten algo similar.

Hasta luego.