自动切换键盘语言的自定义文本框控件

分享于 

7分钟阅读

Web开发

  繁體

 example.gif

介绍

通常我们有英文字母键盘和其他语言支持。 我们可以通过按 alt shift或者 ctrl shift或者从语言栏中选择输入语言来在语言之间进行 switch。

目前我开发一个网页,用户应该用两种语言填写一些字段。 通常情况下,用户应该用英语填写名称,然后从键盘或者语言栏中输入键盘语言。

我试图找到一种方法,使 TextBox 切换自动无键盘切换,并限制用户键入特定语言。

我在互联网上搜索这样的代码,我看到很多人在寻找它。 我只找到一个自定义控件,只与一些 IE ( http://www.asp.net/community/control-gallery/Item.aspx?i=2397 ) 版本兼容,而不使用其他浏览器。

所以我开发了这个控制来达到 上面 目标。

背景

这是一个通用控件,任何 ASP.NET 应用程序中的开发人员都可以使用它。 它继承 ASP.NET TextBox 控件以支持基本textbox控件,并为语言切换添加额外的功能。

使用代码

代码中的主要思想是检测按下的任何键的Unicode,然后根据目标语言中的值更新输入值。

<script type="text/javascript">
 function TextLanguageAr(e, input) {
 //I will detect the Unicode of any key pressed//I query the which property In a keypress event because the Unicode//value of the key pressed is stored in either the keyCode or charCode property, never both. var unicode = e.which;
 switch (unicode) { 
 case192: input.value += 'ذ'; returnfalse; break; 
 case81: input.value += 'ض'; returnfalse; break; 
 case87: input.value += 'ص'; returnfalse; break; 
 case69: input.value += 'ث'; returnfalse; break; 
 case82: input.value += 'ق'; returnfalse; break; 
 case84: if (Shift_Key_pressed(e)) input.value += 'لإ'; 
 else input.value += 'ف'; returnfalse; break; 
 case89: if (Shift_Key_pressed(e)) input.value += 'إ'; 
 else input.value += 'غ'; returnfalse; break; 
 case85: input.value += 'ع'; returnfalse; break; 
 case73: input.value += 'ه'; returnfalse; break; 
 case79: input.value += 'خ'; returnfalse; break; 
 case80: input.value += 'ح'; returnfalse; break; 
 case219: input.value += 'ج'; returnfalse; break; 
 case221: input.value += 'د'; returnfalse; break; 
 case65: input.value += 'ش'; returnfalse; break; 
 case83: input.value += 'س'; returnfalse; break; 
 case68: input.value += 'ي'; returnfalse; break; 
 case70: input.value += 'ب'; returnfalse; break; 
 case71: if (Shift_Key_pressed(e)) input.value += 'لأ'; 
 else input.value += 'ل'; returnfalse; break; 
 case72: if (Shift_Key_pressed(e)) input.value += 'أ'; 
 else input.value += 'ا'; returnfalse; break; 
 case74: input.value += 'ت'; returnfalse; break; 
 case75: input.value += 'ن'; returnfalse; break; 
 case76: input.value += 'م'; returnfalse; break; 
 case59: input.value += 'ك'; returnfalse; break; // for firefox case186: input.value += 'ك'; returnfalse; break; //for Chrome and IE case222: input.value += 'ط'; returnfalse; break; 
 case90: input.value += 'ئ'; returnfalse; break; 
 case88: input.value += 'ء'; returnfalse; break; 
 case67: input.value += 'ؤ'; returnfalse; break; 
 case86: input.value += 'ر'; returnfalse; break; 
 case66: if (Shift_Key_pressed(e)) input.value += 'لآ'; 
 else input.value += 'لا'; returnfalse; break; 
 case78: if (Shift_Key_pressed(e)) input.value += 'آ'; 
 else input.value += 'ى'; returnfalse; break; 
 case77: input.value += 'ة'; returnfalse; break; 
 case188: input.value += 'و'; returnfalse; break; 
 case190: input.value += 'ز'; returnfalse; break; 
 case191: input.value += 'ظ'; returnfalse; break; 
 }
 }
</script>

我发现在 Firefox 中,值( 59 ) 在 IE 和 Chrome ( 186 ) 中有一个不同的值。 所以我添加了 below 代码,使它兼容所有浏览器。

case59: input.value += 'ك'; returnfalse; break; // for firefox case186: input.value += 'ك'; returnfalse; break; //for Chrome and IE

为了检测在按常规键时是否按下了"左移"或者"大写锁"键等特殊键,我使用了JavaScript函数 Shift_Key_pressed

<script type="text/javascript">
 //this function to To detect if a special keys such as"Shift"//or"Caps Lock" key was held down while pressing the keyfunction Shift_Key_pressed(e) 
 {
 // kc= Key Code  kc = e.which;
 // sk= Shift Key sk = e.shiftKey? e.shiftKey : ((kc == 16)? true : false);
 //Capital letters, A to Z, have ASCII codes 65 to 90//a check to see if the ASCII code is between 65 and 90 and the shift key is pressed. //we need also to do the same work if the ASCII code is between 97 (a) and 122 (z) and the// shift key is not pressed, because shifted letters are lower-case if Caps Lock is on.)if (((kc> = 65 && kc <= 90) &&!sk) || 
 ((kc> = 97 && kc <= 122) && sk)) 
 returnfalse; 
 elsereturntrue; 
 }
</script>

Points of Interest

你可以向这里控件添加任意数量的语言,并通过控件属性更改输入类型。

 properties.jpg

浏览器兼容性

这里控件已经在 Firefox 8.0,IE 9和 Chrome 5上进行了测试。

引用

历史记录

  • 18-Dec-2011: 版本 1.0.

控制  AUTO  文本  TEX  LAN  LANG  
相关文章