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

Agochar Keypad - A Virtual Keyboard in Hindi

, 16 May 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
A compact virtual In-Script keyboard to input Hindi (the official language of India) characters in a text box.

Introduction

I implemented a virtual keyboard to translate from En/US layout to Hindi Inscript (Indian Script) keyboard overlay which was standardized by DOE in 1986.

Background

This article demonstrates a virtual keyboard in Hindi (the official language of India). In this, we use an image having all possible Hindi characters, and then generate a map to capture the mouse movements on the image.

<div style="z-index:0;position:absolute; top:0px; left:0px;">
<img src="images/Base_kbd.gif" border="0" usemap="#Map" />
// here, a map having name "Map" is attached with image

<map name="Map" id="Map">// here, we create a map to handel mouse click on image

  <area shape="rect" coords="/*Left*/280,/*Top*/0,/*Right*/300,/*Bottom*/19" 
        onclick="alert('Back Space - Not Implemented!');" />
  <area shape="rect" coords="271,20,300,39" 
        onclick="alert('Delete - Not Implemented!');" /> // handel Delete 
  <area shape="rect" coords="257,40,300,59" 
        onclick="alert('Enter - Not Implemented!');" /> // handel Enter 
  <area shape="rect" coords="-6,61,46,80" 
        onmousedown="IsShift=!IsShift;reset();"/> // handel Left Shift 
  <area shape="rect" coords="247,61,300,79" 
        onmousedown="IsShift=!IsShift;reset();"/> // handel Right Shift 
  <area shape="rect" coords="81,82,196,99" onmousedown="InsertChar('m',32)" 
        onmouseup="ButtonUp(32)"/> // handel Space Bar 

</map>
</div>

To capture keyboard events like KeyPress, KeyUp, and KeyDown at the browser level, we use the addEventListener.

<div style="z-index:0;position:absolute; top:103px; left:0px;">
    <input type="text" id="txtHindi" name="txtHindi" 
      style="width:295px; height:30px;"/>
    </div>

<script>
if(navigator.appName!= "Mozilla") // if the browser is not Mozilla
{
  document.getElementById('txtHindi').onkeydown=checkCode;
  document.getElementById('txtHindi').onkeypress=writeKeyPressed;
  document.getElementById('txtHindi').onkeyup=restoreCode;
}
else
{
  document.addEventListener("onkeydown",checkCode,true);
  document.addEventListener("onkeypress",writeKeyPressed,false);
  document.addEventListener("onkeyup",restoreCode,true);
}
</script>

Using the code

For ease of use, I have attached two separate zip files to this article. One contains only the default page which is the main focus of this article. The other is to show how we can use it in our own web pages.

Key codes and corresponding characters

var VirtualKey = {
'113':'&#2380;','119':'&#2376;','101':'&#2366;','114':'&#2368;',
'116':'&#2370;','121':'&#2348;','117':'&#2361;',
'105':'&#2327;','111':'&#2342;','112':'&#2332;',
'97':'&#2379;','115':'&#2375;','100':'&#2381;','102':'&#2367;',
'103':'&#2369;','104':'&#2346;','106':'&#2352;',
'107':'&#2325;','108':'&#2340;',
'122':'','120':'&#2306;','99':'&#2350;','118':'&#2344;',
'98':'&#2357;','110':'&#2354;','109':'&#2360;',
'81':'&#2324;','87':'&#2320;','69':'&#2310;','82':'&#2312;',
'84':'&#2314;','89':'&#2349;','85':'&#2329;',
'73':'&#2328;','79':'&#2343;','80':'&#2333;',
'65':'&#2323;','83':'&#2319;','68':'&#2309;','70':'&#2311;',
'71':'&#2313;','72':'&#2347;','74':'&#2353;',
'75':'&#2326;','76':'&#2341;', '90':'','88':'&#2305;','67':'&#2339;',
'86':'','66':'','78':'&#2355;','77':'&#2358;',
'96':'`','49':'1','50':'2','51':'3','52':'4','53':'5','54':'6',
'55':'7','56':'8','57':'9','48':'0','45':'-',
'61':'&#2371;','92':'&#2377;',
'91':'&#2337;','93':'&#2364;',
'59':'&#2330;','39':'&#2335;',
'44':',','46':'.','47':'&#2351;',
'126':'','33':'&#2317;','64':'&#2373;','35':'&#2381;',
'36':'&#2352;&#2381;','37':'&#2332;&#2381;&#2334;',
'94':'&#2340;&#2381;&#2352;','38':'&#2325;&#2381;&#2359;',
'42':'&#2358;&#2381;&#2352;','40':'(','41':')',
'95':'&#2307;','43':'&#2400;','124':'&#2321;',
'123':'&#2338;','125':'&#2334;',
'58':'&#2331;','34':'&#2336;',
'60':'&#2359;','62':'&#2404;','63':'&#2399;', '32':' '};

Image for these characters:

agochar-keypad

Points of interest

To use these codes for any other language, you have generate a new images and then update the array of key codes and corresponding characters.

History

  • 8th May 2008 - First release.

License

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

Share

About the Author

Mohit Soam
Web Developer
India India
FD 100
RT 135
FD 50
LT 90
FD 50
RT 45
FD 100
 
output : M
 
that's my first code in LOGO, when i was in VI standard.
 
it's me... Mohit.
 
from Holy City of India.... Rishikesh.
I love programming, not much else to say
 
"Those who dreams the most do the the most"

RSM 4 U

Comments and Discussions

 
GeneralThanks PinmemberMember 906640421-Jan-14 20:04 
Questiontypes additional keys too :( PinmemberIndianGuru11-May-09 3:45 
Questioncan you help me Pinmembersavinir1116-Jul-08 6:47 
GeneralFabulous PinmemberSatya Kanithi19-May-08 6:10 
GeneralAnother hindi-capable keyboard PinmemberWingedFox16-May-08 13:34 
GeneralKya Baat Hai Pinmember Samir Nigam 8-May-08 22:13 
GeneralNice Work PinmemberPriyank Bolia8-May-08 6:23 
GeneralFatabulous utility [modified] PinmemberCleave India8-May-08 5:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.1411022.1 | Last Updated 16 May 2008
Article Copyright 2008 by Mohit Soam
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid