3-edit-translator.html

用Javascript在网页上虚拟键盘的源码

     if(isgecko && document.createEvent && !window.opera)
     {
       var e = document.createEvent("KeyboardEvent");

       if(e.initKeyEvent && ctrl.dispatchEvent)
       {
         e.initKeyEvent("keypress",        // in DOMString typeArg,
                        false,             // in boolean canBubbleArg,
                        true,              // in boolean cancelableArg,
                        null,              // in nsIDOMAbstractView viewArg, specifies UIEvent.view. This value may be null;
                        false,             // in boolean ctrlKeyArg,
                        false,             // in boolean altKeyArg,
                        false,             // in boolean shiftKeyArg,
                        false,             // in boolean metaKeyArg,
                        null,              // key code;
                        val.charCodeAt(0));// char code.

         ctrl.dispatchEvent(e);
       }
     }
     else
     {
       var tmp = (document.selection && !window.opera) ? ctrl.value.replace(/\r/g,"") : ctrl.value;
       ctrl.value = tmp.substring(0, insertionS) + val + tmp.substring(insertionS, tmp.length);
     }

     setRange(ctrl, insertionS + val.length, insertionS + val.length);
   }

   // Translator function:

   var pressedC = false;

   function translate(event)
   {
     if(!vkb || !opened) return true;

     var arr_type = vkb.AltGr ? (vkb.Shift ? "alt_gr_shift" : "alt_gr") : (vkb.Shift ? "shift" : (vkb.Caps ? "caps" : "normal"));
     var lang_array = vkb[vkb.mod[7].innerHTML + "_" + arr_type];

     if(!lang_array) return true;

     if(!event) event = window.event;
     var key = event.which ? event.which : event.keyCode;

     switch(event.type)
     {
       case "keydown":

         switch(key)
         {
           case 20: // Caps

             if(!pressedC)
             {
               vkb.Caps = !vkb.Caps;
               vkb._refresh_layout();

               pressedC = true;
               return true;
             }
             break;

           case 18: // Alt(Gr)

             vkb.AltGr = true;
             vkb._refresh_layout();

             return true;
             break;

           case 16: // Shift

             vkb.Shift = true;
             vkb._refresh_layout();

             return true;
             break;

           default:
             if(event.initKeyEvent)
             {
               var code = String.fromCharCode(key).toUpperCase().charCodeAt(0);

               if((code < 48) || (code > 222)) return true;

               var keymap = [192,49,50,51,52,53,54,55,56,57,48,189,187, // ~ to =
                             81,87,69,82,84,89,85,73,79,80,219,221,220, // q to \
                             65,83,68,70,71,72,74,75,76,186,222,,       // a to '
                             90,88,67,86,66,78,77,188,190,191];         // z to /

               if(navigator.product && (navigator.product.toLowerCase() == 'gecko'))
               {
                 keymap[11] = 109;
                 keymap[12] = 61;
                 keymap[36] = 59;
               }

               for(i = 0; i < keymap.length; i++)
               {
                 if(keymap[i] == code)
                   break;
               }

               if((i > keymap.length) || !lang_array[i])
               {
                 event.returnValue = false;
                 if(event.preventDefault) event.preventDefault();

                 return false;
               }

               code = parseInt(String(lang_array[i]).substr(3, 4), 16);

               var e = document.createEvent("KeyboardEvent");

               e.initKeyEvent("keypress",       //  in DOMString typeArg,                                                           
                              false,            //  in boolean canBubbleArg,                                                        
                              true,             //  in boolean cancelableArg,                                                       
                              null,             //  in nsIDOMAbstractView viewArg,  Specifies UIEvent.view. This value may be null.     
                              false,            //  in boolean ctrlKeyArg,                                                               
                              false,            //  in boolean altKeyArg,                                                        
                              false,            //  in boolean shiftKeyArg,                                                      
                              false,            //  in boolean metaKeyArg,                                                       
                              code, null);      //  key code.

               text.dispatchEvent(e);

               event.returnValue = false;
               if(event.preventDefault) event.preventDefault();

               insertAtCaret(text, String.fromCharCode(code));
             }

             return true;
         }

         break;

       case "keyup":

         switch(key)
         {
           case 13: // Enter

           case 9: // Tab

             break;

           case 20: // Caps

             pressedC = false;
             break;

           case 18: // Alt(Gr)

             vkb.AltGr = false;
             vkb._refresh_layout();

             return true;
             break;

           case 16: // Shift

             vkb.Shift = false;
             vkb._refresh_layout();

             return true;
             break;
         }

         break;

       case "keypress":

         switch(key)
         {
           case 13: // Enter

           case 32: // Space

             break;

           default: // all other keys

             if((key < 33) || (key > 222) || !(document.all || window.opera)) return true;

             var code = String.fromCharCode(key).toUpperCase().charCodeAt(0);

             var keymap = [96,49,50,51,52,53,54,55,56,57,48,45,61, // ` to =
                           81,87,69,82,84,89,85,73,79,80,91,93,92, // q to \
                           65,83,68,70,71,72,74,75,76,59,39,,      // a to '
                           90,88,67,86,66,78,77,44,46,47];         // z to /

             var keymap_sh = [126,33,64,35,36,37,94,38,42,40,41,95,43,   // ~ to +
                              81,87,69,82,84,89,85,73,79,80,123,125,124, // q to |
                              65,83,68,70,71,72,74,75,76,58,34,,         // a to "
                              90,88,67,86,66,78,77,60,62,63];            // z to ?

             var map = vkb.Shift ? keymap_sh : keymap;

             for(i = 0; i < map.length; i++)
               if(map[i] == code)
                 break;

             if((i > map.length) || !lang_array[i]) { event.returnValue = false; return false; }

             code = parseInt(String(lang_array[i]).substr(3, 4), 16)

             if(!window.opera) event.keyCode = code;

             // cancel default behaviour:
             event.returnValue = false;

             insertAtCaret(text, String.fromCharCode(code));
         }

       return false;
     }

     return true;
   }

 //--></SCRIPT></HEAD>

 <BODY>
  <P style="font-family:Tahoma;font-size:14px">Virtual keyboard test #3: virtual keyboard as a language proxy for a real keyboard.</P>

  <TABLE border="0" width="60%">
   <TR>
     <TD width="100px">

      <TEXTAREA onkeyup="getCaretPositions(this);translate(event);" onkeypress="translate(event);" onkeydown="translate(event);" onclick="getCaretPositions(this);" id="textfield" rows="12" cols="50"></TEXTAREA>

     </TD>
  </TR></TABLE>

  <P><A href="javascript:keyb_change()" onclick="javascript:blur()" id="switch" style="font-family:Tahoma;font-size:14px;text-decoration:none;border-bottom: 1px dashed #0000F0;color:#0000F0">Show keyboard</A></P>

  <DIV id="keyboard"></DIV>

</BODY></HTML>