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/11.0.201/keymanweb.js" type="text/javascript"></script>
<script src="https://s.keyman.com/kmw/engine/11.0.201/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()
.