Introducing the Virtual Keyboard API

June 22, 2009

It is often difficult for Internet users to input text in many non-Latin script-based languages for a variety of reasons. The correct keyboard layout may not be installed on the computer they're using - sometimes such a layout may not be well developed or widely available. This poses a challenging problem for web developers because there is no way they can ensure that their users have access to this very basic input technology. Our Transliteration API can help, but requires that the user know multiple languages.

Right on the heels of introducing support for translating Persian (Farsi), we've added a new Virtual Keyboard API into the Google AJAX Language API to further assist with text input. With this, developers can help their users input text without relying on the right software being installed on the computer they happen to be using.

It couldn't be easier to get this on your page. Simply load the right package:

google.load("elements", "1", {
 packages: "keyboard"
});

Then create a keyboard, specifying the keyboard layout and text field to bind to:
var kbd = new google.elements.keyboard.Keyboard(
 [google.elements.keyboard.LayoutCode.Arabic],
 ['myTextArea']);

And here's what it looks like:

This gives you the control to provide a better user experience, even for multilingual websites. By creating multiple keyboards with different layouts, each text field can be bound to the appropriate keyboard - and the user will see only the keyboard attached to whichever text field has the focus.

But don't take my word for it - check out a sample for yourself. Notice that in addition to allowing users to click on the virtual keyboard, it also temporarily transforms the key assignments on their physical keyboard, allowing rapid typing for those users accustomed to a given layout.

With this initial release, we are launching 5 language layouts. They are:

  • Arabic (العربية)
  • Hindi (हिन्दी)
  • Polish (Polski)
  • Russian (Русский)
  • Thai (ไทย)


We plan to roll out support for more keyboard layouts in the future. But in the meantime, read through the class reference and see the rest of the Code Playground samples.

After you've had time to experiment, let us know what you think and which other layouts you'd like to see. Feedback is always welcome in our support forum and IRC channel.

Labels ,