自动切换键盘语言的自定义 TextBox 控件

• 下载源代码 - 26 KB
• 下载 DLL - 4 KB

引言

通常我们使用支持多种语言的英文键盘。我们可以通过按 Alt+Shift 或 Ctrl+Shift，或者从语言栏中选择输入语言来切换语言，然后开始用选定的语言输入。

目前我正在开发一个网页，用户需要在两个语言中填写一些字段（例如，先用英文填写姓名，然后再用阿拉伯文填写姓名）。通常在这种情况下，用户应该先用英文填写姓名，然后从键盘或语言栏切换键盘语言。

我尝试寻找一种方法，使 TextBox 自动切换语言，而无需手动切换键盘，并限制用户只能输入特定语言。

我在互联网上搜索了这样的代码，发现很多人都在寻找它。我只找到一个自定义控件，它仅兼容某些版本的 Internet Explorer (http://www.asp.net/community/control-gallery/Item.aspx?i=2397)，并且不能与其他浏览器一起工作。

因此，我开发了这个控件来实现上述目标。

背景

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

Using the Code

代码的主要思想是检测按下的任何键的 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) { 
                case 192: input.value += 'ذ';   return false; break;     
                case 81: input.value += 'ض';   return false; break;     
                case 87: input.value += 'ص';   return false; break;     
                case 69: input.value += 'ث';   return false; break;     
                case 82: input.value += 'ق';   return false; break;     
                case 84: if (Shift_Key_pressed(e)) input.value += 'لإ'; 
                         else input.value += 'ف'; return false; break;     
                case 89: if (Shift_Key_pressed(e)) input.value += 'إ'; 
                         else input.value += 'غ'; return false; break;     
                case 85: input.value += 'ع';   return false; break;     
                case 73: input.value += 'ه';   return false; break;     
                case 79: input.value += 'خ';   return false; break;     
                case 80: input.value += 'ح';   return false; break;     
                case 219: input.value += 'ج';   return false; break;     
                case 221: input.value += 'د';   return false; break;     
                case 65: input.value += 'ش';   return false; break;     
                case 83: input.value += 'س';   return false; break;     
                case 68: input.value += 'ي';   return false; break;     
                case 70: input.value += 'ب';   return false; break;     
                case 71: if (Shift_Key_pressed(e)) input.value += 'لأ'; 
                         else input.value += 'ل'; return false; break;     
                case 72: if (Shift_Key_pressed(e)) input.value += 'أ'; 
                         else input.value += 'ا'; return false; break;     
                case 74: input.value += 'ت';   return false; break;     
                case 75: input.value += 'ن';   return false; break;     
                case 76: input.value += 'م';   return false; break;     
                case 59: input.value += 'ك';   return false; break;  // for firefox   
                case 186: input.value += 'ك';   return false; break;  //for Chrome and IE   
                case 222: input.value += 'ط';   return false; break;     
                case 90: input.value += 'ئ';   return false; break;     
                case 88: input.value += 'ء';   return false; break;     
                case 67: input.value += 'ؤ';   return false; break;     
                case 86: input.value += 'ر';   return false; break;     
                case 66: if (Shift_Key_pressed(e)) input.value += 'لآ'; 
                         else input.value += 'لا'; return false; break;     
                case 78: if (Shift_Key_pressed(e)) input.value += 'آ'; 
                         else input.value += 'ى'; return false; break;     
                case 77: input.value += 'ة';   return false; break;     
                case 188: input.value += 'و';   return false; break;     
                case 190: input.value += 'ز';   return false; break;     
                case 191: input.value += 'ظ';   return false; break;     
           }
    }
</script>

我发现一个奇怪的现象是，Firefox 中的 Unicode 值 (59) 在 IE 和 Chrome 中具有不同的值 (186)。因此，我添加了以下代码以使其与所有浏览器兼容。

case 59: input.value += 'ك';   return false; break;  // for firefox 
case 186: input.value += 'ك';   return false; break; //for Chrome and IE

为了检测在按下常规键时是否按住了“Shift”或“Caps Lock”等特殊键，我使用了 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 key
    function 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)) 
            return false; 
        else
            return true; 
    }
</script>

关注点

您可以向此控件添加任意数量的语言，并通过控件属性更改输入类型。

浏览器兼容性

此控件已在 Firefox 8.0、Internet Explorer 9 和 Chrome 5 上进行了测试。

参考文献

• http://www.javascriptkit.com/javatutors/javascriptkey2.shtml
• http://24ways.org/2007/capturing-caps-lock
• https://codeproject.org.cn/KB/scripting/Detect_Caps_Lock.aspx
• http://www.asp.net/community/control-gallery/Item.aspx?i=2397

历史

• 2011年12月18日：版本 1.0。