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

Multi-language-Virtual-Keyboard-With-JavaScript

Virtual Keyboard With JavaScript Plugin is a  pure JavaScript library for using the Virtual Keyboard to create multi-language digital keyboards and Numpads for textual content fields and content material editable components.

how to detect virtual keyboard using javascript, virtual keyboard javascript source code, hindi virtual keyboard javascript, keyboard js, multilingual onscreen keyboard

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

Official Website(furcan): Click Here

This superior jQuery/javascript plugin is developed by furcan. For extra Advanced Usages, please go to the official website.