HomeBlogGoogle's Virtual Keyboard & Prototype JavaScript

Google Virtual Keyboard Doesn't Work With PrototypeJS

Published September 16, 2009

Google recently stepped up their multiple languages game by adding support for additional languages in their Languages API. This includes nine new typing layouts for their drop-in virtual keyboard typer for form field controls. This will ultimately help your website to be more internationally usable and more comfortable to users who might speak or write in a language different than your site's default.

Figure 1. Input Hebrew characters from an English keyboard or by clicking the buttons with the mouse. Click to go to a test page.

But there's a problem. Wanting to test the newly added Hebrew JavaScript keyboard, I went to test it out on an internal project that uses some Hebrew fields but started seeing javascript errors. After some debugging and chatting with a Google engineer, I realized that the problems occur because, 1., we are using the Prototype JS Library and 2., Prototype "takes over" and "invades" the Javascript namespace to provide convenience functions like .capitalize() and .each() to native objects like String and Array. These "latched-on" Prototype methods collide with some of the functions of Google's code.

This brings up an interesting discussion which I hadn't thought about before. Are these problems the fault of Google's or Prototype's programming techniques? The Googler argued that Prototype's convenience functions (such as Array.each) can cause problems with other (and future) libraries that aren't specifically written with Prototype in mind. I realize this now and have to agree -- I might be more inclined to use the jQuery library from now on because of this; I tested the Virtual Keyboard API with jQuery loaded and didn't see any errors. So although Prototype adds methods to javascript that make programming faster and easier, those very methods and techniques could reduce compatibility with other third party libraries.

For example, whereas Prototype adds an .each() method to the native Array type so you can do things like

new Array(1,2,3,4).each(alert);

with jQuery you use a function of the jQuery namespace to do the same thing:

jQuery.each(new Array(1,2,3,4),function(){ alert(this); } );

Still, due to the widespread use of the Prototype library I believe Google should be able to make their code work gracefully with or without Prototype, which is why I posted a defect in their issue tracker.

blog comments powered by Disqus


Michael Butler

Michael Butler

Michael joined the RustyBrick team in 2008 to focus on transitioning existing web sites to new & enhanced platforms. He graduated from Rutgers University in 2005 and holds a B.S. in Computer Science.

This article is under Programming, Web Programming

There is 1 comment for this post

Connect With Us

Send Us a Message

Do you wish to give us feedback on one of our apps, send us a message or explore a proposal? Fill out the form below and we'll get back to you pronto!

Visit Us

250 West Nyack Road, Suite #200 West Nyack, NY 10994
Get Directions

Call Us Toll Free