Keyboard Support

Contact and Search

Keyman.com Homepage

Header bottom

Keyman.com

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

On this page

Control-by-Control Example

In this example, a simulated webmail form, the default and permissible keyboard for each control is managed by the web page. We use the automatic mode for simplicity of demonstration. We also link to the CDN for KeymanWeb in this example.

Code Walkthrough

Include the following script in the HEAD of your page:

<script type="text/javascript">
  var kmw = tavultesoft.keymanweb;

  function SetupDocument()
  {
    kmw.init({
        root: './',  // Note - if drawing the latest version of KeymanWeb from the CDN, this will
                     // default to the source folder on our servers.
        ui: 'toggle',
        resources: './'
    });
    
    /* Disable KeymanWeb interaction on the 'Email to' TEXT control */
    kmw.disableControl(document.f.address);
    /* Set the default keyboard for the 'Subject' TEXT control to 'off' (i.e. default browser keyboard) */
    /* As KeymanWeb relies on the on-screen keyboard to change languages for touch-based devices, this will
     * not work for them and will default to the first language added to KeymanWeb after initialization. */
    kmw.setKeyboardForControl(document.f.subject, '', '');
    /* Set the default keyboard for the 'Message body' TEXTAREA to the LaoKeys keyboard */
    kmw.setKeyboardForControl(document.f.text, 'Keyboard_laokeys', 'lo');
  }

  window.addEventListener( 'load' , SetupDocument );
</script>

Also include the following HTML code:

<head>
    <!-- Load the KeymanWeb engine -->
    <script src="https://s.keyman.com/kmw/engine/10.0.103/keymanweb.js" type="text/javascript"></script>
    <script src="https://s.keyman.com/kmw/engine/10.0.103/kmwuitoggle.js" type="text/javascript"></script>
    <!-- // Also be sure to load your keyboards.  Note that stubs will not work with this
         // example without detailing paths precisely in the init() call's parameter.-->
</head>


<!-- When the page has finished loading, advise KeymanWeb of control settings, see above -->
<body onload="SetupDocument()">

Note that in this example we disabled the first element (document.f.address) by API call. A later API call can re-enable KeymanWeb for this control should it fit the page's design.

Alternatively, this can be done by instead adding the class 'kmw-disabled' to the control. This will permanently block KeymanWeb from handling its input.

API References

On disabling controls: keyman.disableControl().

On setting the keyboard for a single control: keyman.setKeyboardForControl().


Return to Example index