homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Gold Sponsor 2015!
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Blank keys on onMouseDown and show keys onMouseUp in virtual keyboard

Msg#: 4487477 posted 6:05 am on Aug 23, 2012 (gmt 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>




WebmasterWorld Senior Member 5+ Year Member

Msg#: 4487477 posted 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved