Welcome to WebmasterWorld Guest from

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)

New User

joined:Aug 23, 2012
posts: 1
votes: 0


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)

<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;
text-align: center;
background: #fff;
border: 2px solid #C0C0C0;


#keyboard li:hover {
position: relative;
top: 1px;
left: 1px;
border-color: #e5e5e5;


<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++)



// to show keys
function doShowKeys(){

var Acoll = document.getElementsByTagName("div");
//alert(Acoll .length);
for (LC=0; LC<Acoll.length; LC++)



function fix(){



<body >

<ul id="keyboard">
<!-- <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>

7:01 am on Aug 24, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Nov 3, 2005
votes: 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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members