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 incomplete pre-release version of this documentation. Click here to open the current version, 17.0.

Manual Control - Custom Interface


In this example, the web page designer has opted for their own user interface instead of the KeymanWeb interface. The keyboards in the selector are populated from the KeymanWeb list of keyboards. Please click this link to open the test page.

Code Walkthrough

Include the following script in the HEAD of your page:

<script>
  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();
  }
</script>

Also include the following HTML code:

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

And finally, include the keyboard SELECT and the clickable help img:

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

On programmatically setting the keyboard:

On getting KeymanWeb's managed list of keyboards:


On to Control by Control Example