Tạo bàn phím ảo virtual keyboard trên website

Tạo bàn phím ảo virtual keyboard trên website bằng HTML, Javascript.

Demo
1. Chèn style sheet vào thẻ head
Code:

{code}<head>
<link rel="stylesheet" type="text/css" src="http://www.nganluong.vn/webskins/keyboard/keyboard.css" /></head>

<div class="clear"/></div>
<script src="http://www.nganluong.vn/webskins/skins/skin1/messages.js">
</script>{/code}
2. Tạo nút hiển thị bàn phím

{code}<script src="http://www.nganluong.vn/webskins/keyboard/keyboard.js">
</script>

<div id="inputBox-nl">
<input id="password" class="keyboardInput" type="password" style="border: 1px solid rgb(204, 204, 204); background: rgb(255, 255, 255) url(webskins/skins/skin1/index_images/input_bg.gif) no-repeat scroll left top; padding-top: 4px; padding-right: 3px; font-size: 12px; width: 238px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; height: 17px;" maxlength="20" value="" name="password"/>
<img class="keyboardInputInitiator" src="/cntt/webskins/keyboard/keyboard.gif" alt="Bàn phím ảo" title="Hiển thị bàn phím ảo"/>
</div>{/code}

Mã hiển thị bàn phím ảo

{code}<table id="keyboardInputMaster" cellspacing="0" cellpadding="0" border="0" style="-moz-user-select: none; cursor: default; left: 836px; bottom: auto; right: auto; top: 474px; position: absolute;">
<thead>
<tr>
<td>
<span id="keyboardInputClear" title="Xoá thông tin đã nhập">Xoá</span>
<span id="keyboardInputClose" class="" title="Đóng lại">X</span>
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<div id="keyboardInputLayout">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="">`</td>
<td class="">1</td>
<td class="">2</td>
<td class="">3</td>
<td class="">4</td>
<td class="">5</td>
<td class="">6</td>
<td class="">7</td>
<td class="">8</td>
<td class="">9</td>
<td class="">0</td>
<td class="">-</td>
<td class="">=</td>
<td class="last">Bksp</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="">Tab</td>
<td class="">q</td>
<td class="">w</td>
<td class="">e</td>
<td class="">r</td>
<td class="">t</td>
<td class="">y</td>
<td class="">u</td>
<td class="">i</td>
<td class="">o</td>
<td class="">p</td>
<td class="">[</td>
<td class="">]</td>
<td class="last">\</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="">Caps</td>
<td class="">a</td>
<td class="">s</td>
<td class="">d</td>
<td class="">f</td>
<td class="">g</td>
<td class="">h</td>
<td class="">j</td>
<td class="">k</td>
<td class="">l</td>
<td class="">;</td>
<td class="">'</td>
<td class="last">Enter</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="">Shift</td>
<td class="">z</td>
<td class="">x</td>
<td class="">c</td>
<td class="">v</td>
<td class="">b</td>
<td class="">n</td>
<td class="">m</td>
<td class="">,</td>
<td class="">.</td>
<td class="">/</td>
<td class="last">Shift</td>
</tr>
</tbody>
</table>
<table class="keyboardInputCenter" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="" style="padding-right: 50px; padding-left: 50px;"> </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>{/code}

{code}<script type="text/javascript">

 function on_submit()
 {
 if(document.RegisterForm.condition.checked==false)
 {
 alert('Bạn chưa đồng ý với các điều khoản của công ty');
 change_content('tabfinish');
 document.RegisterForm.condition.focus();
 return false;
 }
 wait();
 return true;
 }
</script>{/code}

Code từ nganluong.vn