Keyman Engine for Web

https://help.keyman.com/developer/engine/web/
Admin
Keyman Engine for Web is a JavaScript library that provides keyboard input methods for web...
Tokens:129,609
Snippets:1,587
Trust Score:9.9
Update:5 months ago
Show doc for...
Tokens:
Raw
### Deadkey Example with keyman.interface.deadkeyOutput

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/deadkeyOutput

This example demonstrates how deadkey generation is compiled using `keyman.interface.deadkeyOutput` after detecting specific input with `keyman.interface.deadkeyMatch`.

```javascript
keyman.interface.deadkeyOutput(0, Pelem, 0);
```

--------------------------------

### Keyman Keyboard Rule Example

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/fullContextMatch

This example shows a Keyman keyboard rule that uses store, deadkey, any, and index functions. It demonstrates how these elements can be combined to define complex matching logic.

```keyman
store(pair_1) 'aA'
store(pair_2) 'bB'

c Lots of keyboard rules...

dk(money) 'c' any(pair_1) index(pair_2, 3) + '.' > 'taxi'
```

--------------------------------

### UI State and Initialization Functions

Source: https://help.keyman.com/developer/engine/web/current-version/reference/core/index

Functions for getting UI state and initializing KeymanWeb.

```APIDOC
## UI State and Initialization Functions

### `getUIState` Function

*   **Description**: Get the KeymanWeb user interface activation state.
*   **Parameters**: None
*   **Returns**: The current UI state.

### `init` Function

*   **Description**: Sets license key, selects user interface, and other KeymanWeb Options.
*   **Parameters**: 
    * `options` (object) - An object containing initialization options.
```

--------------------------------

### Request Specific Keyboards from CDN

Source: https://help.keyman.com/developer/engine/web/19.0/guide/adding-keyboards

Install specific keyboards by providing their names or a combination of keyboard name and language code. This example installs the default 'French' keyboard and two variants of 'EuroLatin' for Swedish and Norwegian.

```javascript
keyman.addKeyboards('french','sil_euro_latin@sv','sil_euro_latin@no')
```

--------------------------------

### Example of Deadkey Implementation

Source: https://help.keyman.com/developer/engine/web/current-version/reference/interface/deadkeyMatch

This example illustrates how a deadkey might be implemented in Keyman Developer. It shows a rule that captures a backquote character and stores it as a deadkey state (dk(backquote)). The `deadkeyMatch` function is then used to detect this state when a subsequent character is typed.

```keyman
+ '`' > dk(backquote)

...

dk(backquote) + "a" > "à"
```

```javascript
keyman.interface.deadkeyMatch(0, Pelem, 0)
```

--------------------------------

### KeymanWeb Initialization and Control Setup

Source: https://help.keyman.com/developer/engine/web/current-version/guide/examples/control-by-control

This script initializes KeymanWeb and sets up specific keyboard behaviors for different form controls. It demonstrates disabling a control, setting a default keyboard, and assigning a specific keyboard to a textarea.

```APIDOC
## KeymanWeb Initialization and Control Setup

### Description
This JavaScript code initializes the KeymanWeb engine and configures keyboard settings for individual form controls within a web page. It includes examples of disabling a control, setting the default keyboard for a control, and assigning a specific keyboard to a textarea.

### Method
JavaScript

### Endpoint
N/A (Client-side script)

### Parameters
#### Initialization Options
- **root** (string) - Path to the KeymanWeb resources. Defaults to server's source folder if loading from CDN.
- **ui** (string) - Specifies the UI mode, e.g., 'toggle'.
- **resources** (string) - Path to KeymanWeb resources.

#### Control Configuration Functions
- **keyman.disableControl(controlElement)**: Disables KeymanWeb input for the specified control element.
- **keyman.setKeyboardForControl(controlElement, keyboardId, languageCode)**: Sets the default keyboard for the specified control. `keyboardId` can be an empty string to use the default browser keyboard. `languageCode` is optional.

### Request Example
```javascript
function SetupDocument() {
  keyman.init({
    root: './',
    ui: 'toggle',
    resources: './'
  }).then(function() {
    loadKeyboards();
    keyman.disableControl(document.f.address);
    keyman.setKeyboardForControl(document.f.subject, '', '');
    keyman.setKeyboardForControl(document.f.text, 'Keyboard_laokeys', 'lo');
  });
}

window.addEventListener( 'load' , SetupDocument );
```

### Response
N/A (Client-side script execution)
```

--------------------------------

### Setup and Keyboard Loading Script

Source: https://help.keyman.com/developer/engine/web/current-version/guide/examples/full-manual-control

Include this script in the HEAD of your page to initialize KeymanWeb, load custom keyboards, and populate a custom keyboard selector. It handles the asynchronous loading of KeymanWeb and populates the dropdown.

```javascript
var KWControl = null;

/* SetupDocument: Called when the page finishes loading */
function SetupDocument()
{
  keyman.init().then(function(){
    // Load the keyboards of your choice here.
    loadKeyboards();

    KWControl = document.getElementById('KWControl');
    var kbds = keyman.getKeyboards();
    for(var kbd in kbds)
    {
      var opt = document.createElement('OPTION');
      opt.value = kbds[kbd].InternalName + "$$" + kbds[kbd].LanguageCode;
      opt.innerHTML = kbds[kbd].Name;
      KWControl.appendChild(opt);
    }
    document.f.multilingual.focus();

    keyman.setActiveKeyboard('', '');
  });
}

/* KWControlChange: Called when user selects an item in the KWControl SELECT */
function KWControlChange()
{
  /* Select the keyboard in KeymanWeb */
  var name = KWControl.value.substr(0, KWControl.value.indexOf("$$"));
  var languageCode = KWControl.value.substr(KWControl.value.indexOf("$$"+2));
  keyman.setActiveKeyboard(name, languageCode);
  /* Focus onto the multilingual field in the form */
  document.f.multilingual.focus();
}
```

--------------------------------

### Get Installed Keyboards - Keyman Engine Web API

Source: https://help.keyman.com/developer/engine/web/19.0/reference/core/getKeyboards

Call this function to retrieve an array containing specifications for all keyboards currently installed and available to the Keyman Engine. Refer to keyman.getKeyboard() for details on the structure of the returned keyboard specification objects.

```javascript
keyman.getKeyboards()
```

--------------------------------

### Manual Control Setup

Source: https://help.keyman.com/developer/engine/web/current-version/guide/examples/manual-control

This script should be included in the HEAD of your HTML page to set up KeymanWeb's manual control features. It initializes Keyman, hides the OSK by default, and sets the 'laokeys' keyboard as active.

```APIDOC
## SetupDocument()

### Description
Initializes KeymanWeb and sets up the initial state for manual control.

### Parameters
None

### Example
```javascript
function SetupDocument()
{
  keyman.init().then(function () {
    keyman.osk.hide();
    keyman.setActiveKeyboard('laokeys');
  });
}
```
```

--------------------------------

### Basic KeymanWeb Integration Example

Source: https://help.keyman.com/developer/engine/web/current-version/guide/get-started

This HTML snippet demonstrates the minimal code required to integrate KeymanWeb into a webpage. It includes the necessary script files for the engine and UI toggle, and initializes KeymanWeb to automatically attach to input elements. Keyman keyboards are loaded from Keyman Cloud.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>KeymanWeb - A First Example</title>

  <script src='https://s.keyman.com/kmw/engine/17.0.330/keymanweb.js'></script>
  <script src='https://s.keyman.com/kmw/engine/17.0.330/kmwuitoggle.js'></script>
  <script>
    (function() {
      keyman.init({attachType:'auto'}).then(function() {
        keyman.addKeyboards('@en'); // Loads default English keyboard from Keyman Cloud (CDN)
        keyman.addKeyboards('@th'); // Loads default Thai keyboard from Keyman Cloud (CDN)
      });
    })(keyman);
  </script>
</head>
<body>
  <p>Click me and type: <input placeholder="Hello World"/></p>
</body>
</html>
```

--------------------------------

### Example: Using context() in Keyboard Rules

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/context

Demonstrates how to use the `context()` function within a Keyman Developer rule to check preceding text and then output new characters. This example replaces 'abc' with 'D' after verifying the context.

```javascript
"abc" + "d" > context(2) "D"
```

```javascript
keyman.interface.output(3, Pelem, keyman.interface.context(2, 1, Pelem));
keyman.interface.output(0, Pelem, "D");
```

--------------------------------

### getKeyboards Function

Source: https://help.keyman.com/developer/engine/web/current-version/reference/core/getKeyboards

Retrieves an array of specifications for all currently installed keyboards.

```APIDOC
## getKeyboards

### Description
Get details of currently installed keyboards.

### Method
```javascript
keyman.getKeyboards()
```

### Parameters
None.

### Return Value
`Array`
    An array of specifications for the currently-installed keyboards.

### Description
See keyman.getKeyboard() for detail on the returned keyboard specification objects.

### See also
  * keyman.addKeyboards()
```

--------------------------------

### keyman.loaduserinterface Event

Source: https://help.keyman.com/developer/engine/web/19.0/reference/events/keyman/loaduserinterface

The keyman.loaduserinterface event is triggered to start the UI initialization. Event handlers should return true to allow processing to continue.

```APIDOC
## keyman.loaduserinterface Event

### Description
Called to initiate the ui initialization process.

### Syntax
```javascript
keyman.addEventListener('loaduserinterface', function() {
  // ... event handler code ...
});
```

### Parameters
None.

### Return Value
`boolean` - Returns `true` if the event should continue processing, `false` otherwise. Typically, event handlers should return `true`.
```

--------------------------------

### Setup and Control KeymanWeb with JavaScript

Source: https://help.keyman.com/developer/engine/web/current-version/guide/examples/manual-control

Use this script in the HEAD of your page to initialize Keyman, hide the OSK by default, and set a specific keyboard. The KWControlClick function toggles OSK visibility when the Keyman icon is clicked.

```javascript
/* SetupDocument: Called when the page finishes loading */
function SetupDocument()
{
  /* Make sure that Keyman is initialized (we can't guarantee initialization order) */
  keyman.init().then(function () {
    /* Prevents automatic display of the onscreen keyboard. (default automatic) */
    keyman.osk.hide();
    /* Select the LaoKeys keyboard */
    keyman.setActiveKeyboard('laokeys');
  });
}

/* KWControlClick: Called when user clicks on the KWControl IMG */
function KWControlClick()
{
  if(keyman.osk.isEnabled()) {
    keyman.osk.hide();
  } else {
    keyman.osk.show(true); // Specifies that the OSK should display whenever a valid
                           // control has focus, re-enabling the default behavior.
  }
}

```

--------------------------------

### getKeyboards

Source: https://help.keyman.com/developer/engine/web/19.0/reference/core/getKeyboards

Retrieves an array of specifications for all keyboards currently installed and available to Keyman.

```APIDOC
## getKeyboards

### Description
Get details of currently installed keyboards.

### Method
```
keyman.getKeyboards()
```

### Parameters
None.

### Return Value
`Array`
    An array of specifications for the currently-installed keyboards.

### Description
See keyman.getKeyboard() for detail on the returned keyboard specification objects.

### See also
  * keyman.addKeyboards()
```

--------------------------------

### contextMatch Usage Example

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/contextMatch

Illustrates how contextMatch can be used to check if the initial context matches a specific value, similar to Keyman Developer rules.

```javascript
keyman.interface.contextMatch(1, Pelem, "a", 1)
```

--------------------------------

### Setup and Control KeymanWeb OSK

Source: https://help.keyman.com/developer/engine/web/19.0/guide/examples/manual-control

Include this script in the HEAD of your page to initialize KeymanWeb, hide the OSK by default, and set the 'laokeys' keyboard as active. The KWControlClick function toggles the OSK visibility when the KeymanWeb icon is clicked.

```javascript
/* SetupDocument: Called when the page finishes loading */
function SetupDocument()
{
  /* Make sure that Keyman is initialized (we can't guarantee initialization order) */
  keyman.init().then(function () {
    /* Prevents automatic display of the onscreen keyboard. (default automatic) */
    keyman.osk.hide();
    /* Select the LaoKeys keyboard */
    keyman.setActiveKeyboard('laokeys');
  });
}

/* KWControlClick: Called when user clicks on the KWControl IMG */
function KWControlClick()
{
  if(keyman.osk.isEnabled()) {
    keyman.osk.hide();
  } else {
    keyman.osk.show(true); // Specifies that the OSK should display whenever a valid
                           // control has focus, re-enabling the default behavior.
  }
}
```

--------------------------------

### Keyboard Language Example: index Command

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/indexOutput

Illustrates how the `index` command in Keyman keyboard language maps characters from a 'keys' store to an 'output' store.

```keyman
store(keys)   'abcde'
store(output) 'αβγδε'
+ any(keys) > index(output,1)
```

--------------------------------

### Requesting specific keyboards from CDN by name

Source: https://help.keyman.com/developer/engine/web/current-version/guide/adding-keyboards

This method allows you to install specific keyboards by providing their names or a combination of keyboard name and language code.

```APIDOC
## Requested from the CDN by keyboard name

### Description
This method allows you to install specific keyboards by providing their names or a combination of keyboard name and language code.

### Method
`keyman.addKeyboards(keyboard1, keyboard2, ...)`

### Parameters
#### Path Parameters
- **keyboard** (string) - Required - The name of the keyboard, or a pair of keyboard name and language code separated by '@' (e.g., 'french', 'sil_euro_latin@sv'). Multiple keyboards can be provided as separate arguments.

### Request Example
```javascript
keyman.addKeyboards('french','sil_euro_latin@sv','sil_euro_latin@no');
```
```

--------------------------------

### osk.helpclick Event

Source: https://help.keyman.com/developer/engine/web/19.0/reference/events/osk/index

This event is triggered when the UI is to present a help page. It facilitates access to help documentation or guides.

```APIDOC
## osk.helpclick Event

### Description
Called when allows the UI to present a help page.

### Method
Event

### Endpoint
N/A (Event)

### Parameters
None explicitly documented.

### Request Example
N/A

### Response
N/A
```

--------------------------------

### indexOutput Usage Example

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/indexOutput

Demonstrates how to use indexOutput to output a character from the 'output' store, corresponding to 'a' in the 'keys' store, by overwriting no characters and using an incremented index.

```javascript
keyman.interface.indexOutput(0, 'αβγδε', 1, Pelem)
```

--------------------------------

### Output Function Equivalent in Developer Rules

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/output

This example demonstrates how a Keyman Developer rule like 'a' + "'" > "á" translates to the `keyman.interface.output` function. It shows how to erase one character ('a') and output another ('á') to achieve the replacement.

```javascript
keyman.interface.output(1, Pelem, "á");
```

--------------------------------

### HTML Structure for KeymanWeb Integration

Source: https://help.keyman.com/developer/engine/web/current-version/guide/examples/control-by-control

This HTML snippet shows how to include the KeymanWeb engine and UI toggle scripts in the head of your document and how to structure the body to trigger the KeymanWeb setup function on page load.

```APIDOC
## HTML Structure for KeymanWeb Integration

### Description
This HTML code demonstrates the necessary elements to include in your web page to integrate KeymanWeb. It includes script tags for loading the KeymanWeb engine and its UI toggle, and sets up the `body` tag to call the initialization function upon page load.

### Method
HTML

### Endpoint
N/A (Client-side HTML structure)

### Parameters
N/A

### Request Example
```html
<head>
    <!-- Load the KeymanWeb engine -->
    <script src="https://s.keyman.com/kmw/engine/17.0.330/keymanweb.js" type="text/javascript"></script>
    <script src="https://s.keyman.com/kmw/engine/17.0.330/kmwuitoggle.js" type="text/javascript"></script>
    <!-- // Also be sure to load your keyboards. -->
</head>

<!-- When the page has finished loading, advise KeymanWeb of control settings -->
<body onload="SetupDocument()">
    <!-- Your form elements would go here, e.g., -->
    <form name="f">
        <input type="text" name="address" />
        <input type="text" name="subject" />
        <textarea name="text"></textarea>
    </form>
</body>
```

### Response
N/A
```

--------------------------------

### HTML Structure

Source: https://help.keyman.com/developer/engine/web/19.0/guide/examples/manual-control

Includes the necessary KeymanWeb engine and keyboard stub scripts, and sets up the body to call SetupDocument on load.

```APIDOC
## HTML Structure

### Description
This HTML structure includes the KeymanWeb engine and keyboard stub, and configures the page to initialize Keyman upon loading.

### Parameters
None

### Code Example
```html
<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()">
```
```

--------------------------------

### SetupDocument Function

Source: https://help.keyman.com/developer/engine/web/19.0/guide/examples/manual-control

This function initializes Keyman, hides the on-screen keyboard, and sets the default keyboard. It is called when the page finishes loading.

```APIDOC
## SetupDocument

### Description
Initializes Keyman, hides the on-screen keyboard, and sets the default keyboard. This function is intended to be called when the page finishes loading.

### Parameters
None

### Code Example
```javascript
function SetupDocument()
{
  /* Make sure that Keyman is initialized (we can't guarantee initialization order) */
  keyman.init().then(function () {
    /* Prevents automatic display of the onscreen keyboard. (default automatic) */
    keyman.osk.hide();
    /* Select the LaoKeys keyboard */
    keyman.setActiveKeyboard('laokeys');
  });
}
```
```

--------------------------------

### Example of deleteContext Usage

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/deleteContext

This example demonstrates how to use deleteContext when a rule's output requires deleting four context entries (three characters and one deadkey).

```javascript
// Context is length four (three characters + one deadkey), so we delete all four.
keyman.interface.deleteContext(4, element);
```

--------------------------------

### Deadkey Example in Keyman Developer

Source: https://help.keyman.com/developer/engine/web/current-version/reference/interface/deadkeyOutput

This example demonstrates how a deadkey can be used to manage hidden state for character modification. The Developer compiler generates a unique ID for the deadkey state.

```keyman
+ '`' > dk(backquote)

...

dk(backquote) + "a" > "à"
```

--------------------------------

### Example: Checking for Caps Lock State

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/stateMatch

This example demonstrates how to use stateMatch to check if the Caps Lock state is active for a given keystroke event 'e'. The state-key bitflag for Caps Lock is 0x100.

```javascript
keyman.interface.stateMatch(e, 0x100)
```

--------------------------------

### HTML Structure for Manual Control

Source: https://help.keyman.com/developer/engine/web/current-version/guide/examples/manual-control

This HTML code includes the necessary KeymanWeb engine and keyboard stub scripts, and sets up the body to call the SetupDocument function on load. It also includes the control image that triggers KWControlClick.

```APIDOC
## HTML Structure

### Description
Includes the KeymanWeb engine, keyboard stub, and the control image for manual interaction.

### Example
```html
<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 -->
<body onload="SetupDocument()">

<!-- 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()' />

</body>
```
```

--------------------------------

### Example of deadkeyMatch usage for detecting a backquote deadkey

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/deadkeyMatch

This example demonstrates how deadkeyMatch can be compiled to detect a specific deadkey state, such as a backquote, at the current caret position. It is part of a larger system for managing deadkeys.

```javascript
keyman.interface.deadkeyMatch(0, Pelem, 0)
```

--------------------------------

### keyman.init()

Source: https://help.keyman.com/developer/engine/web/current-version/reference/core/init

Initializes Keyman Engine for Web and configures its options. This is an asynchronous operation. It's safe to call `keyman.init()` multiple times to set additional options. You should not call other functions until Keyman initialization is complete.

```APIDOC
## keyman.init()

### Description
Initializes KeymanWeb and configures KeymanWeb Options. This is an asynchronous operation. `keyman.init()` is automatically called after the page loads, with default options, if it has not already been called by scripts on the page. It is safe to call `keyman.init()` once more in this situation, in order to set additional options. The `keyman.initialized` property may be checked to determine the current initialization state of Keyman Engine for Web. You should not call functions other than `keyman.init()` until Keyman initialization is complete. As `keyman.init()` returns a Promise, the Promise fulfilment callback is the appropriate place to perform post-init steps.

### Method
```javascript
keyman.init(initOptions);
```

### Parameters
#### Parameters
- **initOptions** (Object) - Required - See the Description section below for the necessary object specification.

### Return Value
`Promise`: A JavaScript Promise fulfilled upon full initialization.
```

--------------------------------

### Example: Matching a Single Quote Key

Source: https://help.keyman.com/developer/engine/web/19.0/reference/interface/keyMatch

This example demonstrates how keyMatch can be used to replicate the logic of a simple Keyman Developer rule. It checks if the event 'e' corresponds to an unshifted single quote key (keycode 39).

```javascript
keyman.interface.keyMatch(e, 0, 39)
```

--------------------------------

### Initialization and Versioning

Source: https://help.keyman.com/developer/engine/web/current-version/reference/core

Functions and properties related to initializing the Keyman engine and checking its version.

```APIDOC
## init function

### Description
Initializes the Keyman engine for web usage.

### Method
Not specified (likely a function call)

### Endpoint
N/A

### Parameters
None specified

### Request Example
N/A

### Response
None specified

## keyman.initialized

### Description
A boolean property indicating whether the Keyman engine has been initialized.

### Method
Property access

### Endpoint
N/A

### Parameters
None specified

### Request Example
N/A

### Response
Boolean (true/false)

## version

### Description
Returns the version of the Keyman Engine for Web.

### Method
Not specified (likely a function call or property access)

### Endpoint
N/A

### Parameters
None specified

### Request Example
N/A

### Response
String representing the version number
```

--------------------------------

### KeymanWeb Initialization and Control Configuration

Source: https://help.keyman.com/developer/engine/web/19.0/guide/examples/control-by-control

This script initializes KeymanWeb and configures keyboard settings for specific HTML controls. It demonstrates disabling a control, setting a default keyboard to the browser's default, and setting a specific keyboard for another control.

```APIDOC
## KeymanWeb Initialization and Control Configuration

### Description
Initializes KeymanWeb and sets up specific keyboard behaviors for different form controls. This includes disabling KeymanWeb for certain inputs, setting default keyboards, and loading custom keyboards.

### Script
```javascript
function SetupDocument() {
  keyman.init({
    root: './',
    ui: 'toggle',
    resources: './'
  }).then(function() {
    // Load the keyboards of your choice here.
    loadKeyboards();

    /* Disable KeymanWeb interaction on the 'Email to' TEXT control */
    keyman.disableControl(document.f.address);
    /* Set the default keyboard for the 'Subject' TEXT control to 'off' (i.e. default browser keyboard) */
    keyman.setKeyboardForControl(document.f.subject, '', '');
    /* Set the default keyboard for the 'Message body' TEXTAREA to the LaoKeys keyboard */
    keyman.setKeyboardForControl(document.f.text, 'Keyboard_laokeys', 'lo');
  });
}

window.addEventListener( 'load' , SetupDocument );
```

### HTML Integration
Include the KeymanWeb engine and UI scripts in the HEAD section, and ensure the `SetupDocument` function is called on page load.

```html
<head>
    <!-- Load the KeymanWeb engine -->
    <script src="js/keymanweb.js" type="text/javascript"></script>
    <script src="js/kmwuitoggle.js" type="text/javascript"></script>
</head>

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

### API References
* `keyman.disableControl()`: Disables KeymanWeb input for a specified control.
* `keyman.setKeyboardForControl(control, keyboardId, languageCode)`: Sets the default keyboard for a specific control. An empty `keyboardId` and `languageCode` will revert to the browser's default keyboard.
```

--------------------------------

### ShowHelp Function

Source: https://help.keyman.com/developer/engine/web/current-version/reference/compatibility/index

Shows the help overlay, retained for compatibility. Use `keyman.osk.setPos()` and `keyman.osk.show()`.

```APIDOC
## ShowHelp

### Description
Shows the help overlay. This function is retained for compatibility with existing custom keyboards.

### Method
JavaScript

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
keyman.osk.setPos();
keyman.osk.show();
```

### Response
#### Success Response (Type: void)
No return value.

#### Response Example
N/A
```

--------------------------------

### build

Source: https://help.keyman.com/developer/engine/web/19.0/reference/core/build

Accesses the build version of the KeymanWeb instance. This is a read-only property that returns a string representing the version, for example, '14.0.1'.

```APIDOC
## build

### Description
Denotes the release-version .patch component for the loaded KeymanWeb instance.

### Syntax
```
keyman.build
```

### Type
string

### Access
Read only

### Return Value
(for example) `14.0.1`
```

--------------------------------

### Get KeymanWeb Version

Source: https://help.keyman.com/developer/engine/web/current-version/reference/core/version

Access the 'version' property to retrieve the current version of the KeymanWeb instance. This is a read-only string value.

```APIDOC
## version

### Description
The version number of the loaded KeymanWeb instance.

### Method
Access (Read-only)

### Endpoint
keyman.version

### Parameters
None

### Request Body
None

### Response
#### Success Response
- **version** (string) - The version number of the KeymanWeb instance, e.g., '18.0'.

### Response Example
```json
{
  "version": "18.0"
}
```
```

--------------------------------

### Get Active Keyboard Name

Source: https://help.keyman.com/developer/engine/web/19.0/reference/core/getActiveKeyboard

Call this function to retrieve the internal name (ID) of the keyboard that is currently active in the Keyman Engine.

```javascript
keyman.getActiveKeyboard()
```

--------------------------------

### HTML Structure for KeymanWeb Integration

Source: https://help.keyman.com/developer/engine/web/current-version/guide/examples/full-manual-control

This HTML includes the necessary KeymanWeb engine and keyboard stub scripts, and sets up the body to call the SetupDocument function on load. It also defines the custom keyboard selector.

```html
<head>
    <!-- Load the KeymanWeb engine -->
    <script src="keymanweb.js" type="text/javascript"></script>
    <!-- Load the your keyboard stubs here -->
    <script src="unified_loader.js" type="text/javascript"></script>
    <!-- ... -->
</head>

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

<!-- Display the KWControl selector with different keyboards listed -->
<p>Keyboard: <select id='KWControl' onchange='KWControlChange()'><option value=''>English</option></select>
```

--------------------------------

### KeymanWeb Initialization Options

Source: https://help.keyman.com/developer/engine/web/current-version/reference/index

Site designers can define various options in the initialization call to KeymanWeb to customize its behavior and appearance.

```APIDOC
## KeymanWeb Initialization Options

### Description
The following options can be defined by the site designer in the initialization call to KeymanWeb.

### Usage
Pass these options during the KeymanWeb initialization process to configure its behavior.
```

--------------------------------

### Initialize Keyman Engine for Web

Source: https://help.keyman.com/developer/engine/web/19.0/reference/core/init

This is the basic syntax for initializing Keyman Engine for Web. The `initOptions` parameter is an object that specifies various configuration settings.

```javascript
keyman.init(initOptions);
```

--------------------------------

### Get Absolute Y-Coordinate of an Element

Source: https://help.keyman.com/developer/engine/web/19.0/reference/util/getAbsoluteY

Use this function to find the vertical position of an element relative to the document. It requires an HTML element as input.

```javascript
keyman.util.getAbsoluteY(Pelem);
```

--------------------------------

### HTML Body Tag with onload Event

Source: https://help.keyman.com/developer/engine/web/current-version/guide/examples/control-by-control

This HTML body tag ensures that the `SetupDocument` function, which initializes KeymanWeb and configures controls, is called once the page has finished loading.

```html
<body onload="SetupDocument()">

```

--------------------------------

### Get Absolute X-Coordinate of an Element

Source: https://help.keyman.com/developer/engine/web/19.0/reference/util/getAbsoluteX

Use this function to find the horizontal position of an element relative to the document. It requires an HTML element as input.

```javascript
keyman.util.getAbsoluteX(Pelem);
```

--------------------------------

### Add Keyboards using Object Specifications

Source: https://help.keyman.com/developer/engine/web/19.0/reference/core/addKeyboards

Illustrates adding keyboards using object specifications. This method provides more control over keyboard loading, especially when dealing with local or custom keyboard files. Multiple specifications can be provided in a single call.

```javascript
keyman.addKeyboards({
    "name": "basic",
    "language": "en"
});
```

--------------------------------

### ShowHelp Function

Source: https://help.keyman.com/developer/engine/web/19.0/reference/compatibility

Use this compatibility function to show the on-screen keyboard help. The modern approach involves keyman.osk.setPos() and keyman.osk.show().

```javascript
keyman.osk.setPos(), keyman.osk.show()
```

--------------------------------

### Add Keyboards using String Specifications

Source: https://help.keyman.com/developer/engine/web/current-version/reference/core/addKeyboards

Demonstrates adding keyboards using string formats. The Keyman Cloud is used to source the keyboard file, and Keymanweb loads webfonts and the keyboard file automatically on demand. Use this when you need to add a specific keyboard, a default keyboard for a language, or a specific keyboard-language pair.

```javascript
keyman.addKeyboards('sil_thai_tux');
keyman.addKeyboards('@km');
keyman.addKeyboards('sil_thai_tux@km');
```

--------------------------------

### ShowHelp

Source: https://help.keyman.com/developer/engine/web/current-version/reference/compatibility/ShowHelp

Shows the on-screen keyboard at the requested (x, y) coordinates.

```APIDOC
## ShowHelp

### Description
Shows the on-screen keyboard at the requested (x, y) coordinates.

### Syntax
```
keyman.ShowHelp(x, y);
```

### Parameters
#### Path Parameters
- **x** (number) - Required - x-coordinate for display of the OSK.
- **y** (number) - Required - y-coordinate for display of the OSK.

### Return Value
`undefined`

### Replaced by
`keyman.osk.setPos()`, `keyman.osk.show()`
```

--------------------------------

### Get Keyboard Metadata

Source: https://help.keyman.com/developer/engine/web/19.0/reference/core/getKeyboard

Call this function to retrieve metadata for a specific keyboard and language. The optional language code parameter allows for more precise selection.

```javascript
keyman.getKeyboard(keyboardName, languageCode)
```

--------------------------------

### ShowHelp Function

Source: https://help.keyman.com/developer/engine/web/19.0/reference/compatibility/index

This function shows the help overlay. It is retained for compatibility, with keyman.osk.setPos() and keyman.osk.show() as the modern equivalents.

```javascript
keyman.osk.setPos()
keyman.osk.show()
```

--------------------------------

### Get an Option Value

Source: https://help.keyman.com/developer/engine/web/19.0/reference/util/getOption

Retrieves the value of a specified option. If the option is not found, it returns the provided default value. If no default is specified, an empty string is returned.

```javascript
keyman.util.getOption(optionName, dflt);
```

--------------------------------

### Basic KeymanWeb Integration

Source: https://help.keyman.com/developer/engine/web/19.0/guide/get-started

Include the KeymanWeb engine and UI toggle scripts. Initialize the engine with attachType:'auto' to automatically link it to input elements. Load keyboards using keyman.addKeyboards().

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>KeymanWeb - A First Example</title>

  <script src='https://s.keyman.com/kmw/engine/18.0.245/keymanweb.js'></script>
  <script src='https://s.keyman.com/kmw/engine/18.0.245/kmwuitoggle.js'></script>
  <script>
    (function() {
      keyman.init({attachType:'auto'}).then(function() {
        keyman.addKeyboards('@en'); // Loads default English keyboard from Keyman Cloud (CDN)
        keyman.addKeyboards('@th'); // Loads default Thai keyboard from Keyman Cloud (CDN)
      });
    })(keyman);
  </script>
</head>
<body>
  <p>Click me and type: <input placeholder="Hello World"/></p>
</body>
</html>
```

--------------------------------

### Get Last Active Element

Source: https://help.keyman.com/developer/engine/web/19.0/reference/compatibility/GetLastActiveElement

Call this function to retrieve the last active target element before the current Keyman operation. Note that this function is deprecated and has been replaced by `keyman.getLastActiveElement()`.

```javascript
keyman.GetLastActiveElement();
```

--------------------------------

### Get Active Language Code

Source: https://help.keyman.com/developer/engine/web/19.0/reference/core/getActiveLanguage

Call this function to retrieve the language code of the currently active keyboard. The function returns a string representing the language in BCP 47 format.

```javascript
keyman.getActiveLanguage()
```

--------------------------------

### Get Absolute Element Position

Source: https://help.keyman.com/developer/engine/web/19.0/reference/util/getAbsolute

Use this function to find the absolute x and y coordinates of an HTML element. It requires an HTML element as input and returns an object containing the 'x' and 'y' properties.

```javascript
keyman.util.getAbsolute(Pelem);
```

--------------------------------

### Add Keyboards using String Specifications

Source: https://help.keyman.com/developer/engine/web/19.0/reference/core/addKeyboards

Demonstrates adding keyboards using string formats. The string can specify a keyboard ID, a language ID prefixed with '@', or a combination of both. Keyman Cloud is used to source the keyboard file automatically.

```javascript
keyman.addKeyboards('sil_ipa', '@fr', 'basic@en');
```

--------------------------------

### Get OSK Window Rect

Source: https://help.keyman.com/developer/engine/web/19.0/reference/osk/getRect

Call this function to retrieve the current position and size of the on-screen keyboard window. The returned object provides the coordinates and dimensions needed for layout or interaction.

```javascript
keyman.osk.getRect()
```

--------------------------------

### Include KeymanWeb Engine and Keyboard Stub

Source: https://help.keyman.com/developer/engine/web/19.0/guide/examples/manual-control

These script tags load the KeymanWeb engine and the necessary keyboard stub. The body tag's onload attribute calls the SetupDocument function to initialize KeymanWeb.

```html
<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()">

```
Tokens:
Raw