| Blank keys on onMouseDown and show keys onMouseUp in virtual keyboard
|
csbalaji1
msg:4487479 | 6:05 am on Aug 23, 2012 (gmt 0) |
Hi,
I am developing Virtual keyboard for my project using javascript.
I am facing problem to blank key when onMouseDown event fired and show key when onMouseUp event fired.
pls sugest me the solution for this.
I have pasted sample code below for your reference.(u can see city bank Bharain login page also)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Virtual Keyboard</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style type="text/css">
.on {
display: none;
}
.off {
display: block;
}
#keyboard {
margin: 0;
padding: 0;
list-style: none;
}
#keyboard li {
font-family: Verdana, Arial, Helvetica, sans-serif;font-weight:bold;
float: right;
margin: 0 0px 0px 0;
width: 20px;
height: 20px;
line-height:20px;
text-align: center;
background: #fff;
border: 2px solid #C0C0C0;
}
#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;
}
</style>
<script type="text/javascript" >
// to blank the keys until key released
function doBlankKeys()
{
var Acoll = document.getElementsByTagName("div");
for (LC=0; LC<Acoll.length; LC++)
{
if(Acoll[LC].className=="off")
{
Acoll[LC].className="on";
}
}
}
// to show keys
function doShowKeys(){
var Acoll = document.getElementsByTagName("div");
//alert(Acoll .length);
for (LC=0; LC<Acoll.length; LC++)
{
if(Acoll[LC].className=="on")
{
Acoll[LC].className="off";
}
}
}
function fix(){
doShowKeys();
}
</script>
</head>
<body >
<ul id="keyboard">
<table>
<tr>
<!-- <td><li class="symbol"><div class="off">~</div></li></td> -->
<td ><li class="symbol"><div ID="vkb_spl_13" class="off" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();>:</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_0" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">?</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_1" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">/</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_2" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">&</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_3" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">#</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_4" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">*</div></li></td>
<td><li class="symbol"><div class="off" ID="vkb_spl_5" onMouseDown="doBlankKeys();"
onMouseUp="doShowKeys();" onmouseout="fix();">=</div></li></td>
</tr>
</table>
<ul>
</body>
</html>
|
daveVk
msg:4487905 | 7:01 am on Aug 24, 2012 (gmt 0) |
If you are trying to blank just the "pressed" key then onMouseDown="this.className='on';"
If you are trying to blank all keys, put the on/off class on the #keyboard and just toggle that.
Changing 'block' in the CSS will cause the keys to move position, try color or visibility instead.
|
|
|
