Welcome to WebmasterWorld Guest from 54.197.171.28

Forum Moderators: open

Message Too Old, No Replies

Blank keys on onMouseDown and show keys onMouseUp in virtual keyboard

   
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();">&amp;</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>
7:01 am on Aug 24, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.