Mac/Windows Pop up Virtual Keyboard in Javascript

Question

I'm working on a webapp that's designed for use on large touchscreen monitors. It is not a mobile app; it will run in FireFox and Chrome on mac OS X and windows. I am looking for a way to programmatically pop up the OS's native on-screen keyboard from javascript. In Win 7, this happens automatically when the user focuses on a text area (just like iOS and Android), but for older versions of Windows and OS X, the user has to manually pull it up, which is a nuisance I would like to eliminate.

Ideally, it would work like Win7/iOS/Android and pop up automatically when the user focuses on a text area, but I'll settle for any javascript that pops up the keyboard, even if I have to add it for every text box.

If this is even possible, I'm sure it's different for Mac vs Windows, so I guess this is really two questions in one. Any help is appreciated.

Answer 1

OK, I've tested this locally on my own Mac (version 10.6.8) and Windows XP so the good news is that it works (and it is surprisingly easy).

The essential idea is:

1. Know how to open the on-screen keyboard from command line
2. Set up your browser to allow the command line to be executed from JavaScript
3. Write your HTML :-)

Instructions for both platforms are as follows.

Mac

For Mac, download and build this Xcode project:

• https://github.com/nriley/keyboardViewer

Make sure your build target is the same as the client Mac (eg 64 bit Intel, etc). The output will be an executable file called keyboardViewer . This will pop open the on-screen keyboard when executed.

Let's assume you've saved keyboadViewer onto the user's Desktop then the command you will want to execute is (as in my case):

• /Users/Oliver/Desktop/keyboardViewer .

Windows

On Windows, it is much easier to open the on-screen keyboard from the command line. The following (or similar) will do it:

• C:\\WINDOWS\\system32\\osk.exe

Firefox

Next, you are going to have to execute this file (or Windows command) from a browser. So, install the Firefox add-on here:

• https://addons.mozilla.org/en-US/firefox/addon/commandrun/

This add-on will allow you to execute OS commands (eg execute files) from JavaScript. Before you can execute this from the add-on, you will need to add this command to the list of allowed commands.

To do this, go to about:config in the browser address bar. Right click on the list of preferences and select New > String. The name of the new preference you want to add is extensions.commandrun.allowedcommands . For the value, enter the following:

• On Mac: ["/Users/Oliver/Desktop/keyboardViewer"]
• On Windows: ["C:\\\\WINDOWS\\\\system32\\\\osk.exe"]

HTML

Now, you will be able to open the on-screen keyboard from Firefox with HTML like this:

<script language="javascript">
function openKeyboard(){
    CommandRun.run("/Users/Oliver/Desktop/keyboardViewer", []);
}
</script>

<input type="text" onfocus="javascript:openKeyboard();" />

On Windows, substitute the following:

CommandRun.run("C:\\WINDOWS\\system32\\osk.exe", []);

Alternative

An alternative is to write your own browser in something like Adobe Air. Using that method, your JavaScript calls your Air app and your Air app then executes keyboardViewer (or the Windows equivalent).