Agochar 输入法 - 印地语虚拟键盘

• 下载演示 - 12.4 KB
• 下载源代码 - 11 KB

• 在线演示

引言

我实现了一个虚拟键盘，用于将 En/US 布局转换为印地语 InScript（印度脚本）键盘叠加层，该叠加层由 DOE 于 1986 年标准化。

背景

本文演示了一个印地语（印度官方语言）的虚拟键盘。 在此，我们使用包含所有可能的印地语字符的图像，然后生成一个映射来捕获鼠标在图像上的移动。

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

为了捕获浏览器级别的键盘事件，如 KeyPress、KeyUp 和 KeyDown，我们使用 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>

使用代码

为了方便使用，我将两个单独的 zip 文件附加到本文中。 一个只包含默认页面，这是本文的重点。 另一个是展示如何在自己的网页中使用它。

键码和对应的字符

var VirtualKey = {
'113':'ौ','119':'ै','101':'ा','114':'ी',
'116':'ू','121':'ब','117':'ह',
'105':'ग','111':'द','112':'ज',
'97':'ो','115':'े','100':'्','102':'ि',
'103':'ु','104':'प','106':'र',
'107':'क','108':'त',
'122':'','120':'ं','99':'म','118':'न',
'98':'व','110':'ल','109':'स',
'81':'औ','87':'ऐ','69':'आ','82':'ई',
'84':'ऊ','89':'भ','85':'ङ',
'73':'घ','79':'ध','80':'झ',
'65':'ओ','83':'ए','68':'अ','70':'इ',
'71':'उ','72':'फ','74':'ऱ',
'75':'ख','76':'थ', '90':'','88':'ँ','67':'ण',
'86':'','66':'','78':'ळ','77':'श',
'96':'`','49':'1','50':'2','51':'3','52':'4','53':'5','54':'6',
'55':'7','56':'8','57':'9','48':'0','45':'-',
'61':'ृ','92':'ॉ',
'91':'ड','93':'़',
'59':'च','39':'ट',
'44':',','46':'.','47':'य',
'126':'','33':'ऍ','64':'ॅ','35':'्',
'36':'र्','37':'ज्ञ',
'94':'त्र','38':'क्ष',
'42':'श्र','40':'(','41':')',
'95':'ः','43':'ॠ','124':'ऑ',
'123':'ढ','125':'ञ',
'58':'छ','34':'ठ',
'60':'ष','62':'।','63':'य़', '32':' '};

这些字符的图像

关注点

要将这些代码用于任何其他语言，您需要生成新的图像，然后更新键码和对应字符的数组。

历史

• 2008 年 5 月 8 日 - 首次发布。