Agochar 键盘：第 2 部分 - 可拖动且可自定义的印地语键盘 - 类似弹出窗口

Mohit Soam

3.00/5 (4投票s)

2008年5月17日

CPOL

2分钟阅读

34893

258

一个可拖动和自定义的键盘，用于使用鼠标在文本框中输入印地语（印度官方语言）字符。

引言

在上一篇文章中，我实现了一个虚拟键盘，用于将 En/US 布局转换为印地语 InScript（印度脚本）。在本文中，我使用另一种方法来实现键盘。

该应用程序主要面向希望用任何其他语言输入文本的初学者。

背景

在上一篇文章中，我意识到如果你想更改任何其他语言的键盘，你必须生成键盘的透明图像，这不容易生成。为了解决这个问题，我更改了代码背后的所有逻辑，并使用一个简单的 FOR 循环 进行迭代，从开始的 Unicode 值到结束值，这就是它的工作原理。

为了使键盘可拖动，我使用了一个 浮动 div，并在该 div 中动态生成按钮。

Using the Code

要将此弹出窗口附加到任何文本框，你必须将输入框的 ID 传递给函数 initKeyPad。

<input id="txtMain" name="txtMain" style="top:4px;font-weight: normal; 
    width: 200px; height: 30px;"  maxLength=250/>

<script>
  initKeyPad(/*top*/80,/*left*/10,/*textbox name*/'txtMain',
	/*popup name*/'keypopup'); // to load and add a popup
</script>

使用的 JavaScript

全局变量声明

在这里我列出了使用的全局变量，以及我如何根据浏览器初始化它们。

//----Variables Used-----//

doDrag=false;
rsdoDrag=true;

posLeft=0;
posTop=0;

txtbox ='txt_insert';
popupName = 'rsldHead';

if (document.all && !window.opera) 
{ 
  btnWidth = 16;
  btnHeight = 16;
  wndHeight = 350;
  wndWidth = 261;
}
else
{
  btnWidth = 18;
  btnHeight = 19;
  wndHeight = 458;
  wndWidth = 276;
}
//----Variables Used-----//

初始化变量

这是主函数，因为初始化从这里开始。此函数有四个参数。前两个参数用于设置键盘的位置。第三个参数是要与键盘关联的文本框的名称。第四个也是最后一个参数用于命名键盘窗口。

如果任何一个变量为空或为 null，则将加载默认值。

function initKeyPad(top,left,txtName,popup) 
{ 
  if(txtName != '')
  {
    txtbox = txtName;
  }
  else
  {
    document.write('<div id="AgocharWindow"');
    document.write(' style="z-index:1;position:absolute;
    top:0px;left:0px;width:260px;height:35px;cursor:pointer;cursor:hand;');
    document.write('padding:5px;background-color:#e0ecff">');
    document.write('<input id="txt_insert" value="demo" style="top:4px;
    font-weight: normal; width: 200px; height: 30px;"  maxLength=250>')
    document.write('</div>');
  }
writeCSS(); // to write KeyPad
if(popup != '')
{
  popupName = popup;
}
writePopUp(top,left); // to generate KeyPad
assignKeyPress();
};

编写 CSS

顾名思义，此函数动态编写 CSS。

function writeCSS()
{
  document.write('<style>'); 
  document.writeln(.ptkbtn_close 
    {border-right: #6eaeff 1px solid; border-top: #6eaeff 1px solid;
 font-weight: bold; border-left: #6eaeff 1px solid; width: 16pt; cursor: pointer; 
border-bottom: #6eaeff 1px solid; height: 14pt; 
    background-color: #669eff; color: #ffffff}');
  document.writeln('.ptkbtn_grey {border-right: #8d8d8d 1px solid; 
    border-top: #8d8d8d 1px solid;
 font-weight: normal; margin: 1px; border-left: #8d8d8d 1px solid; 
    width: 16pt; cursor: pointer; 
border-bottom: #8d8d8d 1px solid; height: '+btnHeight+'pt; background-color: #f7f7f7}');
  document.writeln('.ptkbtn_dk_grey {border-right: #8d8d8d 1px solid; 
    border-top: #8d8d8d 1px solid;
 font-weight: normal; font-size: 14px; margin: 1px; 
    vertical-align: middle; border-left: #8d8d8d 1px solid;
 width: 16pt; cursor: pointer; border-bottom: #8d8d8d 1px solid; 
    height: '+btnHeight+'pt; background-color: #ede3d6}');
  document.writeln('.ptksbtn_grey {border-right: #8d8d8d 1px solid; 
    border-top: #8d8d8d 1px solid; 
font-weight: normal; font-size: 14px; margin: 1px; 
    vertical-align: middle; border-left: #8d8d8d 1px solid;
 width: 150pt; cursor: pointer; border-bottom: #8d8d8d 1px solid; 
    height: '+btnHeight+'pt; background-color: #f1efda}');
  document.writeln('.ptkbtn_matra {border-right: #8d8d8d 1px solid; 
    border-top: #8d8d8d 1px solid;
 font-weight: normal; font-size: 14px; margin: 1px; 
    vertical-align: middle; border-left: #8d8d8d 1px solid;
 width: 16pt; cursor: pointer; border-bottom: #8d8d8d 1px solid; 
    height: '+btnHeight+'pt; background-color: #ffcc99}');
  document.writeln('.ptkbtn_special {border-right: #8d8d8d 1px solid; 
    border-top: #8d8d8d 1px solid;
 font-weight: normal; font-size: 14px; margin: 1px; 
    vertical-align: middle; border-left: #8d8d8d 1px solid;
 width: 16pt; cursor: pointer; border-bottom: #8d8d8d 1px solid; 
    height: '+btnHeight+'pt; background-color: #f1efda}');
  document.write('</style>');
};

生成弹出窗口

这段代码包含动态生成键盘的主要逻辑。

function writePopUp(top,left)
{
  document.write('<div id="'+ popupName +'"');
  document.write(' style="z-index:1;position:absolute;top:'+ 
    top +'px;left:'+ left +'px;width:'+wndWidth+'px;height:'+wndHeight+'px;');
  document.write('padding:2px;background-color:#669eff;"');
  document.write(' onMouseDown="if(rsdoDrag)
    {sldMouseDown(event)}" onMouseUp="sldMouseUp(event)">');
  document.write('<div style="color:#FFFFFF; text-align:right;padding-right:5px" >');
  document.write('<input type="button" class="ptkbtn_close" 
    value="X"  name="butt"  onclick="hide()">');
  document.write('</div>');
  document.write('<div style="background-color:#FFFFFF" 
    onMouseDown="rsdoDrag=false;" onMouseUp="rsdoDrag=true;sldMouseUp(event);">');
  document.write('<table>');
  document.write('<tr><td background="images/space.JPG"></td></tr><tr><td>');

  for (i=2309;i<=2324;i++) 
  document.writeln('<input type="button" class="ptkbtn_grey" 
    value="&#'+i+';"  name="&#'+i+';'+i+'*"  onclick="update(this)" >');
  document.write('</td></tr><tr><td background="images/space.JPG"></td></tr><tr><td>');

  for (i=2325;i<=2361;i++) 
  document.writeln('<input type="button" class="ptkbtn_dk_grey" 
    value="&#'+i+';"  name="&#'+i+';'+i+'*" onclick="update(this)" >');
  document.write('</td></tr><tr><td background="images/space.JPG"></td></tr><tr><td>');

  for (i=2305;i<2308;i++) 
  document.writeln('<input type="button" class="ptkbtn_matra" 
    value="&#'+i+';"  name="&#'+i+';'+i+'*" onclick="update(this)" >');

  for (i=2364;i<2382;i++) 
  document.writeln('<input type="button" class="ptkbtn_matra" 
    value="&#'+i+';"  name="&#'+i+';'+i+'*" onclick="update(this)" >');

  for (i=2384;i<2389;i++) 
  document.writeln('<input type="button" class="ptkbtn_matra" 
    value="&#'+i+';"  name="&#'+i+';'+i+'*" onclick="update(this)" >');
  document.write('</td></tr><tr><td background="images/space.JPG"></td></tr><tr><td>');

  for (i=2392;i<2406;i++) 
  document.writeln('<input type="button" class="ptkbtn_dk_grey" 
    value="&#'+i+';"  name="&#'+i+';'+i+'*" onclick="update(this)" >');
  document.write('</td></tr><tr><td background="images/space.JPG"></td></tr><tr><td>');

  for (i=2406;i<=2416;i++) 
  document.writeln('<input type="button" class="ptkbtn_special" 
    value="&#'+i+';"  name="&#'+i+';'+i+'*" onclick="update(this)" >');
  document.write('</td></tr><tr><td background="images/space.JPG">
    </td></tr><tr><td align="center">');
  document.writeln('<input type="button" class="ptksbtn_grey" 
    value="space"  onclick="addSpace()" >');
  document.write('</td></tr><tr><td background="images/space.JPG"></td></tr>');
  document.write('</table>');
  document.write('</div>');
  document.write('</div>');
};

处理鼠标点击的函数

addSpace 函数用于在文本框中插入空格。
update 函数用于在文本框中插入 Unicode 值。
hide 函数用于隐藏键盘（简单，将 div 的 visibility 更改为 hidden，将 display 更改为 none）。

function addSpace() 
{
  document.getElementById(txtbox).value+=' ';
  document.getElementById(txtbox).focus();
}

function update(letter) 
{
  document.getElementById(txtbox).value+=letter.name.substring(0,1);
  document.getElementById(txtbox).focus();
};

function hide() 
{
  document.getElementById(popupName).style.visibility = "hidden";
  document.getElementById(popupName).style.display = "none";
};

拖放弹出窗口

这段代码包含用于拖放 浮动 div 的函数。

function setLeft(o,oLeft){o.style.left = oLeft + "px"}
function setTop(o,oTop){o.style.top = oTop + "px"}
function setPosition(o,oLeft,oTop) {setLeft(o,oLeft);setTop(o,oTop)}
function sldMouseDown(e)
{
  if (!e) {e = window.event}
  doDrag=true
  o=document.getElementById(popupName)
  sldLeft=getAbsLeft(o)
  sldTop=getAbsTop(o)
  sldMouseLeft=e.clientX-sldLeft
  sldMouseTop=e.clientY-sldTop
};

function sldMouseUp(e)
{
  rsdoDrag=true;
  doDrag=false;
};

function sldMouseMove(e)
{
  if (!e) {e = window.event}
  if (rsdoDrag && doDrag)
  {
    o=document.getElementById(popupName)
    setPosition(o,e.clientX-sldMouseLeft,e.clientY-sldMouseTop)
    return false
  }
};

function assignKeyPress() 
{
  document.onmousemove = sldMouseMove;
};

function getAbsLeft(o) {
  oLeft = o.offsetLeft
  while(o.offsetParent!=null) {
    oParent = o.offsetParent
    oLeft += oParent.offsetLeft
    o = oParent
  }
  return oLeft
};
function getAbsTop(o) {
  oTop = o.offsetTop
  while(o.offsetParent!=null) {
  oParent = o.offsetParent
  oTop += oParent.offsetTop
  o = oParent
  }
  return oTop
};

关注点

要将此代码用于任何其他语言，你所要做的就是找出该语言中字符的开始和结束 UNICODE 值。

  for (i=/*Start*/2309;i<=/*End*/2324;i++) 
  document.writeln('<input type="button" class="/*css Name*/ptkbtn_grey" 
value=/*UNICODE value*/"&#'+i+';"  name=/*display value*/"&#'+i+';'+i+'*"  
	onclick="update(this)" >');

然后只需像上面所示那样在 writePopUp 函数中更新这些值即可。

历史

2008 年 5 月 17 日 - 首次发布