Skip to content
Simple jQuery screen keyboard
JavaScript CSS
Branch: master
Clone or download
javidan Merge pull request #17 from ADV-MMT/master
Modified Backspace function
Latest commit 9dff524 May 31, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Merge https://github.com/digvijayad/jkeyboard into setLayout Sep 13, 2018
lib Modified Backspace function May 31, 2019
README.md Update README.md Jan 21, 2019

README.md

jKeyboard

See In Action

JKeyboard

A simple jQuery on screen keyboard.

Feautures

  • Easy Setup
  • Switch layout on the Fly
  • Supports multiple input fields
  • Custom layout

1. Getting Setup

1.1. Installation

  • First, copy and paste lib/js/keyboard.js in your project, and link to it before the closing </body> element. Make sure jquery is linked before this.
  • Next, you'll need to copy and paste the plugin's css into your project. Both Scss and Css are included for flexibility and modifications.
  • Lastly, link to the keyboard css file jkeyboard.css file before the closing </head> element.

Note: This plugin requires your website or application already runs a copy of jQuery, version 1.10.1 or higher.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jkeyboard.js"></script>
<link rel="stylesheet" href="jkeyboard.css">

1.2 The Basics

The first thing you will require is a keyboard holder that will hold the keyboard, and an input field on which the keyboard will operate.

<input type="text" id="search_field">
<div id="keyboard"></div>
$('#keyboard').jkeyboard({
    input: $('#search_field')
});

1.2 Configuration

To configure custom options when you initialize jKeyboard, simply pass an object in your call to jkeyboard:

1.2.1 Simple Example
$('keyboard').jkeyboard({
    input: $('#search_field),
    layout: 'english'
});
1.2.2 Options
Option type Default values Description
customLayouts object {selectable:[]} selectable, customLayoutName All the custom layouts as well as custom selectable layouts are defined in this object.
customLayouts.selectable array [] array of selectable custom layouts. If you have more than one custom layout, you can choose which layout to show in the layout switch.
customLayouts.layoutname an array of keys for keyboards [] You can add as many custom layouts as you wish in the format of customLayouts.layoutName. Ex.
russian: [
['й','ц','у','к','е','н','г','ш','щ','з', 'х' ],
['ф','ы','в','а','п','р','о','л','д','ж', 'э'],
['shift','я','ч','с','м','и','т','ь','б','ю', 'backspace'],
['numeric_switch','layout_switch', 'space','return']
]
Click to view in action
1.2.3 Methods
Method type values Description
init object layout
input
customLayouts
All the custom layouts as well as custom selectable layouts are defined in this object.
setLayout string azeri
english
russian
numeric
numbers_only
symbolic
*custom layout names*
You can’t perform that action at this time.