Virtual Keyboard

paulo cezar costa

4.00/5 (1 vote)

20 Nov 2012CPOL

8.5K

Code for a virtual keyboard.

Introduction

The need to use a virtual keyboard appears when you need to avoid the use of keys by user. I created this virtual keyboard because the available codes were too complex and this code is extremely simple to use and implement. Focused on accessibility and ease of use. Please quote the author.

See the model:

Using the code

This program reads four digits and after typing it locks the keyboard. If there is error, use the CLEAR button to clear the input field.

Copy and paste the code into your page according to your need.

XML

<html>
<body>
<!-- Author: Paulo Cézar Costa
     Date:  November/2012
     e-mail: pauloc.martins@hotmail.com;guru@wicash.com.br;f198813@tjrn.jus.br
     OBS: Please quote the author
  -->

<div id='teclado' style='background-color:#f30; z-index:999; position: absolute;  left: 200px; top: 80px; height: 70px;'>
    <div id='_img' style='position: absolute; z-index:999; left: 35px; top: 0px; width: 450px; height: 30px; '>
      <font style="color: white; width: 450px; height: 30px; font-size : 18px;">CLICK BELOW IN NUMBERS</font>
   </div>

    <div id='_img' style='position: absolute;  left: 30px; top: 0px;'>
      <img src='degrade.jpg' width='300px' height='120px'>
   </div>
   <style type="text/css">
<!--
.botao  {
  width: 28px; 
  height: 38px; 
  font-size : 26px;
  font-weight: bold;
}
-->
</style>
   <div id='_d0' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 50px; top: 29px;'>
      <input type="button" class="botao" value="0" id="_0" onclick="_add(this.value);"/>
   </div>
   <div id='_d01' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 80px; top: 29px;'>
      <input type="button" class="botao" value="1" id="_1"  onclick="_add(this.value);"/>
   </div>
   <div id='_d02' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 110px; top: 29px;'>
      <input type="button" class="botao"  value="2" id="_2"  onclick="_add(this.value);"/>
   </div>
   <div id='_d03' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 140px; top: 29px;'>
      <input type="button" class="botao" value="3" id="_3"  onclick="_add(this.value);"/>
   </div>
   <div id='_d04' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 170px; top: 29px;'>
      <input type="button" class="botao"  value="4" id="_4"  onclick="_add(this.value);"/>
   </div>

   <div id='_d05' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 50px; top: 72px;'>
      <input type="button" class="botao"  value="5" id="_5"  onclick="_add(this.value);"/>
   </div>
   <div id='_d06' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 80px; top: 72px;'>
      <input type="button" class="botao"  value="6" id="_6"  onclick="_add(this.value);"/>
   </div>
   <div id='_d07' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 110px; top: 72px;'>
      <input type="button" class="botao" value="7" id="_7"  onclick="_add(this.value);"/>
   </div>
   <div id='_d08' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 140px; top: 72px;'>
      <input type="button" class="botao"  value="8" id="_8"  onclick="_add(this.value);"/>
   </div>
   <div id='_d09' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 170px; top: 72px;'>
      <input type="button" class="botao"  value="9" id="_9"  onclick="_add(this.value);"/>
   </div>
   <div id='_id' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 221px; top: 29px;'>
      <input type="text" id="_i" name="_i" style="color: white; 
        background-color:gray; border: 1px; width: 76px; height: 30px; font-size : 28px;"  value=""/>
   </div>
   <div id='_c' style='background-color: #F0FFFF; z-index:999; position: absolute;  left: 210px; top: 73px;'>
      <input type="button"   style="width: 99px; height: 35px; 
        font-size : 23px;"  value="Clear" onclick="_clear();"/>
   </div>
   <script>
   function _clear(){
         document.getElementById("_i").value="";
         _enable();
   }
   function _add(v){
         if(document.getElementById("_i").value.length<4)
         {
            document.getElementById("_i").value+=v;
         }
         if (document.getElementById("_i").value.length==4) { 
             alert("You Typed:"+document.getElementById("_i").value);
             _disable(); 
         } 
   }
   function _disable(){
       for(i=0;i<10;i++){
         document.getElementById("_"+i).disabled=true;
       }
   }
   function _enable(){
       for(i=0;i<10;i++){
         document.getElementById("_"+i).disabled=false;
       }
   }
   _clear();
</script>
</div>
</body>
</html>

Points of Interest

http://www.wicash.com.br/teclado.html

History

Latest version: November, 2012

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)