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.

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.

• javascript
• windows
• macos

• How much control do you have over the client system? e.g. Is it the case that your app is merely written in HTML but that you control everything else about the environment (including the desktop application it will play in)? – Oliver Moran Commented Jul 26, 2012 at 19:24
• Not sure I understand your question. It's a webapp, so my code will have only the normal level of access to the client system. However, the site will be used by a limited number of client machines that are known in advance (it will mostly be used for big demos/presentations). Some client-side setup is already needed for use with the touchscreen, so a solution involving client side changes is acceptable. – user1555590 Commented Jul 26, 2012 at 20:01

1 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 mand line
2. Set up your browser to allow the mand 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./nriley/keyboardViewer

Make sure your build target is the same as the client Mac (e.g. 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 mand 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 mand 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 mand) from a browser. So, install the Firefox add-on here:

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

This add-on will allow you to execute OS mands (e.g. execute files) from JavaScript. Before you can execute this from the add-on, you will need to add this mand to the list of allowed mands.

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.mandrun.allowedmands. 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).