How to add an internationalized keyboard to your Web site

By
-
540

Author: Ben Martin

JavaScript VirtualKeyboard provides a virtual keyboard entirely written in JavaScript with more than 130 supported keyboard layouts allowing you to enter text in a variety of languages. Two uses for JavaScript VirtualKeyboard suggest themselves immediately: integrate it into your Web site to allow clients to enter internationalized text, and run it directly using the online demo when you have to enter internationalized text yourself from an Internet café.

For the latter use case, suppose you have to reply to a message that is written in Japanese, and you’re in an Internet café in Europe. The cafe might not have Chinese, Japanese, and Korean (CJK) input methods set up to be easily selected. Opening the JavaScript VirtualKeyboard online demo, typing your message there, and cutting and pasting it into your webmail interface would allow you to reply in Japanese regardless of the Internet café input methods — assuming that there are sufficient fonts on the machine to show the Unicode characters you need.

With JavaScript VirtualKeyboard you can enter characters either by using the mouse on the virtual keys or by typing on the standard hardware keyboard to actuate the corresponding virtual keys. For example, in Japanese input mode, one can type the romaji characters konnichiha on the hardware keyboard to obtain the state shown in the screenshot with the corresponding hiragana. Completions are shown as you type, allowing you to select Kanji to be inlined in the text, as you would expect from an internationalized input method.

You can change the look of the keyboard using CSS to allow it to more seamlessly blend into your existing Web site, as you’ll see in a moment. The demo Web pages included in the distribution show both an embedded and popup JavaScript VirtualKeyboard.

There are many distributions of JavaScript VirtualKeyboard available. The two most interesting ones are the full and lite version. The full distribution includes all code in noncompacted form and a setup page allowing you to make your own layouts. If you intend to use JavaScript VirtualKeyboard without making a new layout yourself, then the much smaller lite download, which contains the fully functional keyboard with layouts and the JavaScript, is compacted to download slightly faster.

To install JavaScript VirtualKeyboard, extract the distribution into your Web DocumentRoot, typically /var/www/html, as shown below:


# cd /var/www/html
# tar xzf /FromWeb/VirtualKeyboard.lite.3.4.0.tar.gz 
# chown -R root.apache VirtualKeyboard.lite.3.4.0
# ln -s VirtualKeyboard.lite.3.4.0 jsvk

To use JavaScript VirtualKeyboard in your own Web site, first include the main vk_loader JavaScript file, include a div tag where you would like your keyboard to appear, and activate the keyboard using VirtualKeyboard.toggle(). In the example below I show and hide the keyboard with a button click. Adding onfocus JavaScript events on the text entries as shown allows the user to switch text entries and continue to use the virtual keyboard on the next entry box. In this example I’ve used the small skin file and set the default language for the keyboard to Japanese. Setting the default vk_layout variable based on the geoip of the Web browser might also be a nice touch. Setting the CSS class of the password button to VK_no_animate will cause mouse clicks not to show feedback on the virtual keyboard when input is being sent to this field.


<html>
 <head>
  <title>My Web site</title>
  <script type="text/javascript" 
        src="http://localhost/jsvk/vk_loader.js?vk_skin=small&vk_layout=JP Japanese" >
  </script>
 </head>
 <body>
  <table>
   <tr>
    <td>
     <form>
      <div>
       Password<br />
       <input name="pass" id="pass" type="password" class="VK_no_animate" 
         onfocus="VirtualKeyboard.attachInput(this)" /><br />
       Text:<br />
       <textarea name="msg" id="msg" type="text" 
         onfocus="VirtualKeyboard.attachInput(this)"></textarea>
       <br />
       <div id="td"></div>
       <br />
       <input id="jsvk" type="button" value="Keyboard" 
          onclick="VirtualKeyboard.toggle('msg','td'); return false;" />
      </div>
     </form>
    </td>
   </tr>


  </table>
 </body>
</html>

JavaScript VirtualKeyboard lets you offer better support for internationalization on your Web site. If your site is for folks who might be traveling, this could be a huge asset, because they might not be able to easily find an Internet café with input method support for their language of choice. If you find yourself at an Internet café computer and need to jot down a quick paragraph in a non English language, keeping JavaScript VirtualKeyboard and its demo site in the back of your mind might make things a lot less painful.

Category:

  • Internet & WWW

RELATED ARTICLESMORE FROM AUTHOR