Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / Languages / JScript.NET

Agochar Keypad - A Virtual Keyboard in Hindi

4.76/5 (12 votes)
16 May 2008CPOL 1   3K  
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.

HTML
<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.

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

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