jKeyMagic - Adding

<- Back

Installation

Download and unzip to your web root folder.
Add follow lines to <head></head> section of the page.

<script src="jkeymagic.js" type="text/javascript"></script> <link rel="stylesheet" href="jkeymagic.css" type="text/css">

Usage

Loading Keyboard Into List

JKME.keyboard.addKeyboard(PATH, NAME[, KEYBOARD]);

PATH: File path to keyboard layout file.
NAME: Keyboard Layout name.
KEYBOARD: Keyboard layout object file. (optional)

Attaching

Add following codes before </body> tag

JKME.attach(DOM_ELEMENT_TO_ATTACH);
Or you can use the one below
JKME.attach(DOM_ELEMENT_ID_IN_STRING);

DOM_ELEMENT_TO_ATTACH: DOM element.
DOM_ELEMENT_ID_IN_STRING: DOM element id in string. KeyMagic will try to find element by document.getElementById(DOM_ELEMENT_ID_IN_STRING);

Examples:

Attaching all INPUT elements:

    var el = ['input'];
    for (var i in el) {
        JKME.attach(el[i]);
    }

Get notify when keyboard layout is changed and set respective font names:

    var el = ['input'];
    for (var i in el) {
    	JKME.attach(el[i]).onSwitchedLayout = function (sender, keyboardName) {
    		if (keyboardName === 'ZawgyiL') {
    			sender.element.style.fontFamily = 'Zawgyi-One';
    		} else if (keyboardName.search('Ayar') != -1) {
    			sender.element.style.fontFamily = 'Ayar';
    		} else {
    			sender.element.style.fontFamily = 'Masterpiece Uni Sans, Myanmar3, Parabaik, Paduak, Thanlwin';
    		}
    	}
    }

Detaching

You can also detach IME from the previously attached element.

JKME.detach(DOM_ELEMENT_TO_ATTACH);
Or you can use the one below
JKME.detach(DOM_ELEMENT_ID_IN_STRING);

DOM_ELEMENT_TO_ATTACH: DOM element.
DOM_ELEMENT_ID_IN_STRING: DOM element id in string. KeyMagic will try to find element by document.getElementById(DOM_ELEMENT_ID_IN_STRING);

I would be appreciated if you add following code to your page also. And this will display something like Powered by jKeyMagic at the very right bottom of your page.

<div style="font-size:10px;position:relative;bottom:5px;text-align:right;">
Powered by <a href='http://ttkz.me/jkeymagic/index.html'><font color="#ed145b">jKeyMagic</font></a></div>