Keyboard Support

Contact and Search

Keyman.com Homepage

Header bottom

Keyman.com

Other versions
Version 18.0Version 17.0 (current version)Version 16.0Version 15.0Version 14.0Version 13.0Version 12.0Version 11.0Version 10.0Version 2.0

On this page

You are viewing an old version of this documentation. Click here to open the current version, 17.0.

Manual On-Screen Keyboard Control

In this example, the web page designer specifies when KeymanWeb's on-screen keyboard may be displayed on non-mobile devices. They have also specified that the LaoKeys keyboard should be activated by default. This example continues to use the KeymanWeb default interface.

Code Walkthrough

Include the following script in the HEAD of your page:

<script>
  var kmw = keyman;
  
  /* SetupDocument: Called when the page finishes loading */
  function SetupDocument()
  {
    /* Make sure that Keyman is initialized (we can't guarantee initialization order) */
    kmw.init();
  
    KWControl = document.getElementById('KWControl');
    /* Prevents automatic display of the onscreen keyboard. (default automatic) */
    kmw.osk.hide();
    /* Select the LaoKeys keyboard */
    kmw.setActiveKeyboard('laokeys');
  }
  
  /* KWControlClick: Called when user clicks on the KWControl IMG */
  function KWControlClick()
  {
      if(kmw.osk.isEnabled()) {
        kmw.osk.hide();
    } else {
        kmw.osk.show(true); // Specifies that the OSK should display whenever a valid
                            // control has focus, re-enabling the default behavior.
    }
  }
</script>

Also include the following HTML code:

<head>
    <!-- Load the KeymanWeb engine -->
    <script src="keymanweb.js" type="text/javascript"></script>
    <!-- Load the LaoKeys keyboard stub -->
    <script src="laokeys_load.js" type="text/javascript"></script>
</head>

<!-- When the page has finished loading, activate the LaoKeys keyboard, see above -->
<body onload="SetupDocument()">

And finally, include the control img for KeymanWeb:

<!-- Display the KeymanWeb icon for the user to click on -->
<img style="border: solid 1px black; padding: 2px 2px 3px 2px" src='kmicon.png' alt='KeymanWeb' onclick='KWControlClick()' id='KWControl' />

API References

On programmatically setting the keyboard: keyman.setActiveKeyboard().

On managing the visibility of the OSK: keyman.osk.hide(), keyman.osk.show().


On to Full Manual Control Example