Solved

JavaScript Keyboard with images

Posted on 2010-09-14
7
497 Views
Last Modified: 2012-05-10
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>
0
Comment
Question by:kparedo
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
7 Comments
 
LVL 15

Expert Comment

by:StealthyDev
ID: 33670926
Dear Author, I personally think that the points allocated for this question is too less to read the question.
0
 

Author Comment

by:kparedo
ID: 33671084
Yes i know but i'm new and i don't know how to change the allocated points.
0
 

Author Comment

by:kparedo
ID: 33671087
500 points now available.
Thanks
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Accepted Solution

by:
StealthyDev earned 500 total points
ID: 33671702
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
 
LVL 1

Expert Comment

by:wsgarvey
ID: 33672913
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
 

Author Comment

by:kparedo
ID: 33674238
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
 
LVL 15

Expert Comment

by:StealthyDev
ID: 33679028
@author: please give us your integrated code, we will make it work in Firefox also...

Regards
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Time picker 4 471
JavaScript issue with comma separated values 12 77
Dropdownlist not working properly 6 79
Is there a way I can make this alert a little more pretty? 6 153
In previous parts of this Nano Server deployment series, we learned how to create, deploy and configure Nano Server as a Hyper-V host. In this part, we will look for a clustering option. We will create a Hyper-V cluster of 3 Nano Server host nodes w…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question