Virtual keyboard

Pernahkah di bayangkan ketika kita sedang mengerjakan beberapa tugas kantor terkendala, akan keyboard yang sedang bermasalah, khususnya pengerjaan yang membutuhkan keyboard sebagai alat bantu. Memang di sistem operasi sudah menyediakan virtual keboard sebagai media bantu lain, di sini penulis ingin menggunakan atau menciptakan virtual keyboard sendiri menggunakan bahasa pemograman ... nah loo, di sini yang menarik tentunya, sehingga yag saat ini sedang berfikir keras bagimana caranya agar dapat membuat virtual keyboad, artikel harus anda perhatikan step by step langkah-langkahnya

Pernahkah anda bayangkan sebelumnya ada softwere perangkat lunak yang dapat merekam atau melacak penekanan tombol di keyboard?? sunguh sangat berbahaya bukan, oleh karena itu disini sangat jarang sekali penyedian situs yang menggunakan virtual keyboard untuk akses-akses penting mereka, seperti penulisan username dan password, oleh karena itu penulis coba menjelaskan beberapa informasi cara pembuatan virtual keyboard sendiri dengan maksud dan tujuan agar dapat memberikan gambaran terhadap sistem keamanan lain, baik langsung saja

HTML dan Css

 

<h3>Login form</h3> 
<form action="" method="post" id="loginform">
 
<label for="username">Username:</label>
 
<input type="text" name="username" id="username" /> 
<label for="pwd">Password:</label> 
<input type="text" name="pwd" id="pwd"/> 
<a href="#" id="showkeyboard" title="Type in your password 
using a virtual keyboard.">Keyboard</a> <br /> <input type="submit" name="Submit" id="submit_butt"
value="Submit" /> </form>
<div id="keyboard">
<div id="row0">
<input name="accent" type="button" value="`" />
<input name="1" type="button" value="1" />
<input name="2" type="button" value="2" />
<input name="3" type="button" value="3" />
<input name="4" type="button" value="4" />
<input name="5" type="button" value="5" />
<input name="6" type="button" value="6" />
<input name="7" type="button" value="7" />
<input name="8" type="button" value="8" />
<input name="9" type="button" value="9" />
<input name="0" type="button" value="0" />
<input name=" - " type="button" value=" - " />
<input name="=" type="button" value="=" />
<input name="backspace" type="button" value="Backspace" />
</div>
<div id="row0_shift">
<input name="tilde" type="button" value="~" />
<input name="exc" type="button" value="!" />
<input name="at" type="button" value="@" />
<input name="hash" type="button" value="#" />
<input name="dollar" type="button" value="$" />
<input name="percent" type="button" value="%" />
<input name="caret" type="button" value="^" />
<input name="ampersand" type="button" value="&" />
<input name="asterik" type="button" value="*" />
<input name="openbracket" type="button" value="(" />
<input name="closebracket" type="button" value=")" />
<input name="underscore" type="button" value="_" />
<input name="plus" type="button" value="+" />
<input name="backspace" type="button" value="Backspace" />
</div>
 
<div id="row1">
<input name="q" type="button" value="q" />
<input name="w" type="button" value="w" />
<input name="e" type="button" value="e" />
<input name="r" type="button" value="r" />
<input name="t" type="button" value="t" />
<input name="y" type="button" value="y" />
<input name="u" type="button" value="u" />
<input name="i" type="button" value="i" />
<input name="o" type="button" value="o" />
<input name="p" type="button" value="p" />
<input name="[" type="button" value="[" />
<input name="]" type="button" value="]" />
<input name="\" type="button" value="\" />
</div>
 
<div id="row1_shift">
<input name="Q" type="button" value="Q" />
<input name="W" type="button" value="W" />
<input name="E" type="button" value="E" />
<input name="R" type="button" value="R" />
<input name="T" type="button" value="T" />
<input name="Y" type="button" value="Y" />
<input name="U" type="button" value="U" />
<input name="I" type="button" value="I" />
<input name="O" type="button" value="O" />
<input name="P" type="button" value="P" />
<input name="{" type="button" value="{" />
<input name="}" type="button" value="}" />
<input name="|" type="button" value="|" />
</div>
 
<div id="row2">
<input name="a" type="button" value="a" />
<input name="s" type="button" value="s" />
<input name="d" type="button" value="d" />
<input name="f" type="button" value="f" />
<input name="g" type="button" value="g" />
<input name="h" type="button" value="h" />
<input name="j" type="button" value="j" />
<input name="k" type="button" value="k" />
<input name="l" type="button" value="l" />
<input name=";" type="button" value=";" />
<input name="’" type="button" value="’" /> 
</div>
 
<div id="row2_shift">
<input name="a" type="button" value="A" />
<input name="s" type="button" value="S" />
<input name="d" type="button" value="D" />
<input name="f" type="button" value="F" />
<input name="g" type="button" value="G" />
<input name="h" type="button" value="H" />
<input name="j" type="button" value="J" />
<input name="k" type="button" value="K" />
<input name="l" type="button" value="L" />
<input name=";" type="button" value=":" />
<input name="’" type="button" value=’"’ />
</div>
 
<div id="row3">
<input name="Shift" type="button" value="Shift" id="shift" />
<input name="z" type="button" value="z" />
<input name="x" type="button" value="x" />
<input name="c" type="button" value="c" />
<input name="v" type="button" value="v" />
<input name="b" type="button" value="b" />
<input name="n" type="button" value="n" />
<input name="m" type="button" value="m" />
<input name="," type="button" value="," />
<input name="." type="button" value="." />
<input name="/" type="button" value="/" />
</div>
 
<div id="row3_shift">
<input name="Shift" type="button" value="Shift" id="shifton" />
<input name="Z" type="button" value="Z" />
<input name="X" type="button" value="X" />
<input name="C" type="button" value="C" />
<input name="V" type="button" value="V" />
<input name="B" type="button" value="B" />
<input name="N" type="button" value="N" />
<input name="M" type="button" value="M" />
<input name="lt" type="button" value="&lt;" />
<input name="gt" type="button" value="&gt;" />
<input name="?" type="button" value="?" />
</div>
 
<div id="spacebar">
<input name="spacebar" type="button" value=" " />
</div>
 
</div>
Jquery
copy -- paste di header
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery-fieldselection.js"></script>
<script type="text/javascript" src="vkeyboard.js"></script>
berikut ini tampila virtual keyboard tersebut
Silahkan download versi lengkap coding di sini 
Penulis ucapkan terima kasih atas informasi tutorial berikut ini dari

 

Kunjungi www.prowebpro.com untuk menambah wawasan anda.

 

Web Design Packages

Paket BasicPaket BusinessPaket Corporate

Livechat

  • Eddy Marketing

  • Iwan Marketing

  • Agus Support

Address

PT. Proweb Indonesia
Perkantoran Duta Merlin No F4
Jl. Gadjah Mada 3-5
Jakarta Pusat
GPS: S 6o 09' 58.1", E 106o 49' 3.3"

 

Marketing : 021-2636-3170
    021-4631-0337 (Edi)
    0812-3356-3561 (Edi)
    087-888-190-566 (Iwan)
     
WhatsApp : 0813-1977-8908 (Iwan)
    0812-806-2772
     
Support : 021 - 3377 0050
    08788-9089-588 (Agus)
     
Finance : 021-2636-3170
    0816-180-8005 (Yudi)
     
Web : www.proweb.co.id