JavaScript Keyboard with images

Hello,
I have a virtual keypad that doesn't work. I need this keypad (using java) when i click on image 5.gif to enter number 5, when i click 8.gif to enter number 5 into the fields etc...
This password is a 4 caracter password but each character has his own field
There are 4 fields that they need to be filled: CLAVE1 , CLAVE2, CLAVE3, CLAVE4.
The keyboard must automatically insert the pushed number into "CLAVE1"  then the second number into "CLAVE 2", then into "CLAVE3" , then into "CLAVE4".
The image b24h_reset_esp.gif must reset the inserted numbers and  b24h_submit.gif must submit the form.

Here is my html body:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>



                <table cellspacing="0" cellpadding="0" width="150" border="0" id="table1">
                        <tr height="30">
                            <td align="center" colspan="5">
                            <table border="0" id="table2">
                                <tbody>
                                    <tr>
                                        <td>
                                                            <input style="text-align: center" disabled="disabled" maxlength="1" size="1" name="CLAVE1" /></td>
                                        <td>
                                                            <input style="text-align: center" disabled="disabled" maxlength="1" size="1" name="CLAVE2" /></td>
                                        <td>
                                                            <input style="text-align: center" disabled="disabled" maxlength="1" size="1" name="CLAVE3" /></td>
                                        <td>
                                                            <input style="text-align: center" disabled="disabled" maxlength="1" size="1" name="CLAVE4" /></td>
                                    </tr>
                                </tbody>
                            </table>
                            </td>
                        </tr>
                        <tr height="25">
                            <td>
                                          <img border="0" name="bA1" width="19" height="17" alt="img" src="1.gif"></td><td>
                                          <img border="0" name="bA2" width="19" height="17" alt="img" src="2.gif"></td><td>
                                          <img border="0" name="bA3" width="19" height="17" alt="img" src="3.gif"></td><td>
                                          <img border="0" name="bA4" width="19" height="17" alt="img" src="4.gif"></td><td>
                                          <img border="0" name="bA5" width="19" height="17" alt="img" src="5.gif"></td>
                        </tr>
                        <tr height="25">
                            <td>
                                          <img border="0" name="bB1" width="19" height="17" alt="img" src="6.gif"></td><td>
                                          <img border="0" name="bB2" width="19" height="17" alt="img" src="7.gif"></td><td>
                                          <img border="0" name="bB3" width="19" height="17" alt="img" src="8.gif"></td><td>
                                          <img border="0" name="bB4" width="19" height="17" alt="img" src="9.gif"></td><td>
                                          <img border="0" name="bB5" width="19" height="17" alt="img" src="0.gif"></td>                            
                        </tr>
                        <tr>
                            <td align="center" colspan="5">
                            <table cellspacing="0" cellpadding="0" align="center" border="0" id="table3">
                                <tbody>
                                    <tr>
                                        <td align="left">
                                                            <img alt="borrar" border="0" src="b24h_reset_esp.gif" /></td>
                                        <td width="10"> </td>
                                        <td align="right">
                                                            <img alt="Enviar" border="0" src="b24h_submit.gif" /> </td>
                                    </tr>
                                </tbody>
                            </table>
                            </td>
                        </tr>
                </table>
                 

</body>

</html>
kparedoAsked:
Who is Participating?
 
StealthyDevConnect With a Mentor Commented:
Hi again!

I have asked you to increase the points, because experts wont look into question with less points.

Anyways, I have now done something like what you expect.

Have a look at this:
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<script>
	var NumVal = "";
	function numberPressed(NumKey){
		if(NumVal.length < 5)
		{
			NumVal += "" + NumKey;
		}
		document.getElementById("CLAVE1").value = NumVal.substr(0,1);
		document.getElementById("CLAVE2").value = NumVal.substr(1,1);
		document.getElementById("CLAVE3").value = NumVal.substr(2,1);
		document.getElementById("CLAVE4").value = NumVal.substr(3,1);
	}
	function numberReset(){
		NumVal = "";
		MyFrm.reset();
	}
	function numberSubmit(){
		MyFrm.submit();
	}
</script>
<body>


<form name="MyFrm" action="index.html" method="get"> <!-- give the destination page in action -->
<table cellspacing="0" cellpadding="0" width="150" border="0" id="table1">
<tr height="30">
<td align="center" colspan="5">
<table border="0" id="table2">
<tbody>
<tr>
<td>
<input style="text-align: center" readonly maxlength="1" size="1" name="CLAVE1" id="CLAVE1" /></td>
<td>
<input style="text-align: center" readonly maxlength="1" size="1" name="CLAVE2" id="CLAVE2" /></td>
<td>
<input style="text-align: center" readonly maxlength="1" size="1" name="CLAVE3" id="CLAVE3" /></td>
<td>
<input style="text-align: center" readonly maxlength="1" size="1" name="CLAVE4" id="CLAVE4" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr height="25">
<td>
<img border="0" name="bA1" width="50" height="25" alt="1" src="1.gif" onclick="numberPressed(1)"></td><td>
<img border="0" name="bA2" width="50" height="25" alt="2" src="2.gif" onclick="numberPressed(2)"></td><td>
<img border="0" name="bA3" width="50" height="25" alt="3" src="3.gif" onclick="numberPressed(3)"></td><td>
<img border="0" name="bA4" width="50" height="25" alt="4" src="4.gif" onclick="numberPressed(4)"></td><td>
<img border="0" name="bA5" width="50" height="25" alt="5" src="5.gif" onclick="numberPressed(5)"></td>
</tr>
<tr height="25">
<td>
<img border="0" name="bB1" width="50" height="25" alt="6" src="6.gif" onclick="numberPressed(6)"></td><td>
<img border="0" name="bB2" width="50" height="25" alt="7" src="7.gif" onclick="numberPressed(7)"></td><td>
<img border="0" name="bB3" width="50" height="25" alt="8" src="8.gif" onclick="numberPressed(8)"></td><td>
<img border="0" name="bB4" width="50" height="25" alt="9" src="9.gif" onclick="numberPressed(9)"></td><td>
<img border="0" name="bB5" width="50" height="25" alt="0" src="0.gif" onclick="numberPressed(0)"></td>                            
</tr>
<tr>
<td align="center" colspan="5">
<table cellspacing="0" cellpadding="0" align="center" border="0" id="table3">
<tbody>
<tr>
<td align="left">
<img alt="reset" border="0" src="b24h_reset_esp.gif" onclick="numberReset()" /></td>
<td width="10"> </td>
<td align="right">
<img alt="submit" border="0" src="b24h_submit.gif" onclick="numberSubmit()" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

</form>
</body>

</html>

Open in new window

0
 
StealthyDevCommented:
Dear Author, I personally think that the points allocated for this question is too less to read the question.
0
 
kparedoAuthor Commented:
Yes i know but i'm new and i don't know how to change the allocated points.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
kparedoAuthor Commented:
500 points now available.
Thanks
0
 
wsgarveyCommented:
We have made fairly extensive use of onscreen keyboards.  Below is an example of one of them.

senthurpandian's comment above identifies the way you capture the keypress: using an onclick event on the image.

An alternative is to use a single image of the keyboard with an image map to capture the selected key.  Also, if you are using an actual touchscreen, then consider using the onmousedown event.

kb-example.jpg
0
 
kparedoAuthor Commented:
senthurpandian >
Your solution works fine but when i integrate it in my html code it only works in Internet Explorer. In Firefox don't work..
If i run just the code you have me it works perfectly in Firefox too..but after i put it in my html page only in IE...
0
 
StealthyDevCommented:
@author: please give us your integrated code, we will make it work in Firefox also...

Regards
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.