How to Create Multi-language Virtual Keyboard With JavaScript Plugin | KioskBoard

KioskBoard Features:

• Custom keys.
• Supports particular characters.
• 5 built-in themes: light, dark, flat, material, and old school.
• Allows you to create your personal language profile utilizing JSON.
• Configurable CSS animations.

How to make use of it:

Install & download the KioskBoard package deal.

# Yarn
$ yarn add kioskboard

# NPM
$ npm install kioskboard --save

Load the minified model of the KioskBoard library within the doc.

<link href="dist/kioskboard.css" rel="stylesheet">
<script src="dist/kioskboard.js"></script>
<script src="dist/kioskboard.aio.js"></script>

Create a brand new digital keyboard occasion and specify the trail to the language file.

KioskBoard.Init({
  keysJsonUrl: 'kioskboard-keys-english.json'
})

Attach the digital keyboard to a textual content discipline and accomplished it.

<textarea class="virtual-keyboard"></textarea>
KioskBoard.Run('.virtual-keyboard');

Customize the keyboard kind & allow/disable particular characters utilizing the next HTML information attributes:

<textarea class="virtual-keyboard" data-kioskboard-type="all" data-kioskboard-specialcharacters="true"></textarea>

Customize the digital keyboard.

KioskBoard.Init({ 

  /* custom keys here. e.g.
  var myKeyboard = [
      {
          "0": "Q",
          "1": "W",
          "2": "E",
          "3": "R",
          "4": "T",
          "5": "Y",
          "6": "U",
          "7": "I",
          "8": "O",
          "9": "P",
          "10": "Ğ",
          "11": "Ü"
      },
      {
          "0": "A",
          "1": "S",
          "2": "D",
          "3": "F",
          "4": "G",
          "5": "H",
          "6": "J",
          "7": "K",
          "8": "L",
          "9": "Ş",
          "10": "İ",
      },
      {
          "0": "Z",
          "1": "X",
          "2": "C",
          "3": "V",
          "4": "B",
          "5": "N",
          "6": "M",
          "7": "Ö",
          "8": "Ç"
      }
  ]
  */
  keysArrayOfObjects: null,

  // path to the predefined keys
  keysJsonUrl: null,

  // used to override default special characters
  specialCharactersObject: null,

  // language
  language: 'en',

  // "light" || "dark" || "flat" || "material" || "oldschool"
  theme: 'light', 

  // makes Caps Lock active
  capsLockActive: true,

  // allows real keyboard
  allowRealKeyboard: false,

  // enables CSS animations
  cssAnimations: true,

  // the duration of the animation
  cssAnimationsDuration: 360,

  // "slide" || "fade"
  cssAnimationsStyle: 'slide', 

  // allows space key
  keysAllowSpacebar: true,
  keysSpacebarText: 'Space',

  // font family
  keysFontFamily: 'sans-serif',

  // font size
  keysFontSize: '22px',

  // font weight
  keysFontWeight: 'normal',

  // icon size
  keysIconSize: '25px',

  // prevent mobile keyboard
  allowMobileKeyboard: false,

  // scroll the document to the top of the input/textarea element
  autoScroll: true
  
})

jQuery Virtual Keyboard Example, Multi-language Virtual Keyboard/Numpad, Virtual Keyboard Javascript Source Code, javascript virtual keyboard, virtual keyboard html, responsive virtual keyboard

See Demo And Download