Click here to Skip to main content
Click here to Skip to main content

Virtual Keyboard

, 20 Nov 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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. 

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

Share

About the Author

No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141223.1 | Last Updated 20 Nov 2012
Article Copyright 2012 by paulo cezar costa
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid