jQuery MultiLanguage keyboard

Current version 0.0.1

ML Keyboard usage examples

English

$('input#example-1').mlKeyboard({
  layout: 'en_US'
});

Russian

$('input#example-2').mlKeyboard({
  layout: 'ru_RU'
});

Spanish (click vowels to select accents)

$('input#example-3').mlKeyboard({
  layout: 'es_ES'
});

Cusom keyboard trigger button

$('input#example-4').mlKeyboard({
  layout: 'it_IT',
  trigger: '#example-4-btn'
});

Simple Usage

  • Download jquery.ml-keyboard.min.js and jquery.ml-keyboard.css files and add to your project.
  • Activate the plugin on the input fields with prefered layot $('input').mlKeyboard({layout: 'es'});.
  • It's ready.
Options

The following options are available to pass into ML Keyboard on initialization.

  • (string) layout: set layout which is applicable to all input fields. By default it has value 'en_us' what is equal to American English layout.
    Others currently possible layouts
    • es - Spanish
    • ru - Russian
  • (boolean) active_shift: when user first time focus on input field virtual keyboards shift is active. Default value - true.
  • (boolean) active_caps: initial virtual keyboards caps lock state. Default value - false.
  • (boolean) is_hidden: to create keyboard always visible this value should be changed to false. Default value - true.
  • (integer) open_speed: is speed at what keyboard shows. Default value - 300.
  • (integer) close_speed: is speed at what keyboard hides back. Devault value - 100.
  • (boolean) enabled: - change it to false if you want temporary disable keyboard. This param is useful when defines as input data attribute (read below how to set up single inputs with data attributes).

To change behaviour of single input field special data attribute should be added to it's tag name data-mlkeyboard-<option>="value" where option is the same attribute like it's described before.

Advanced Usage

By default plugin goes with all layouts included, but it's possible to customize plugin and left only some layouts as also new layouts can be easy added.

See document in docs folder.