Welcome to WebmasterWorld Guest from 54.161.64.174

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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month