Buenas a todos.
Me han mandado un ejercicio que consiste en que el usuario tenga que hacer click en un teclado virtual para introducir un código.
Utilizando MapEdit, indico las coordenadas de cada tecla, de momento sólo he puesto dos.
El caso es que me he quedado atascado, les pongo el código a continuación:
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Imagemap</title>
<script>
var elementoActivo;
function inicio() {
for (var i = 0; i < document.forms.length;i++) {
for (var j = 0; j < document.forms[i].elements.length; j++) {
document.forms[i].elements[j].onfocus = ganaFoco;
document.forms[i].elements[j].onblur = pierdeFoco;
}
}
}
function pierdeFoco() {
elementoActivo = null;
}
function ganaFoco(evento) {
elementoActivo = evento.target;
//alert(elementoActivo.name);
}
window.onload = inicio;
function escribe() {
document.formu.ganaFoco("c1").value = '1';
}
</script>
</head>
<body>
<div>
<form name="formu">
<img src="teclado.jpg" alt="" usemap="#teclado" style="border-style:none" />
</div>
<div>
<map id="teclado" name="teclado">
<area shape="rect" alt="1" coords="12,26,45,60" nohref title="1" name="n1" value="1" onclick="escribe()"/>
<area shape="rect" alt="2" coords="56,25,90,61" nohref title="2" id="n2" value="2"/>
<area shape="default" nohref="nohref" alt="" />
</map>
</div>
<div id="introduccion">
<table border="1">
<tr><td colspan="8">Por favor por su seguridad introduzca las posiciones de la clave pulsando con el raton sobre el teclado virtual</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr>
<td><input type="text" size="1" maxlength="1" name="c1" /></td>
<td><input type="text" size="1" maxlength="1" name="c2" /></td>
<td><input type="text" size="1" maxlength="1" name="c3" /></td>
<td><input type="text" size="1" maxlength="1" name="c4" /></td>
<td><input type="text" size="1" maxlength="1" name="c5" /></td>
<td><input type="text" size="1" maxlength="1" name="c6" /></td>
<td><input type="text" size="1" maxlength="1" name="c7" /></td>
<td><input type="text" size="1" maxlength="1" name="c8" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
El funcionamiento que más o menos he pensado es el siguiente:
Tengo unas funciones para detectar el elemento activo y que al hacer click en una tecla del teclado virtual se escriba el valor correspondiente en la casilla que tenga el focus e instantaneamente pase el focus al siguiente elemento. Pero no consigo que la función ganaFocus() retorne el nombre de la caja con focus... le he estado dando vueltas un buen rato y no logro hallar la solución :S
Gracias de antemano,
Un saludo!