Click here to Skip to main content
13,002,343 members (78,219 online)
Click here to Skip to main content
Add your own
alternative version

Stats

5K views
3 bookmarked
Posted 20 Nov 2012

Virtual Keyboard

, 20 Nov 2012
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

This member doesn't quite have enough reputation to be able to display their biography and homepage.

You may also be interested in...

Comments and Discussions

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