This time I will share jQuery Plugin and tutorial about jQuery Virtual Keyboard Plugin – Keyboard, hope it will help you in programming stack.
| File Size: | 1.29 MB |
|---|---|
| Views Total: | 35670 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Keyboard is a jQuery plugin built with jQuery UI that adds an onscreen virtual Keyboard to your project , which will popup when a specified entry field is focused. It is mobile ready and also can be used as a Scientific Calculator.
You might also like:
- Virtual Keyboard Emulator
- jQuery On-Screen Virtual Keyboard Plugin – OAK
- jQuery Plugin for Simple Virtual Keyboard – keypad
Installation:
1 |
# NPM |
2 |
$ npm install virtual-keyboard |
3 |
4 |
# Bower |
5 |
$ bower install virtual-keyboard |
Basic Usage:
1. Include jQuery library and the jQuery Keyboard plugin’s files on the page.
01 |
<!-- Core Stylesheet --> |
02 |
<link href="css/keyboard.css" rel="stylesheet" /> |
03 |
<!-- Light Theme --> |
04 |
<link href="css/keyboard-basic.css" rel="stylesheet" /> |
05 |
<!-- Dark Theme --> |
06 |
<link href="css/keyboard-dark.css" rel="stylesheet" /> |
07 |
<!-- CSS for the preview keyset extension --> |
08 |
<link href="css/keyboard-previewkeyset.css" rel="stylesheet" /> |
09 |
<!-- jQuery Is Required --> |
10 |
<script src="/path/to/cdn/jquery.min.js"></script> |
11 |
<!-- Core JavaScript --> |
12 |
<script src="js/jquery.keyboard.js"></script> |
13 |
<!-- With All Extensions --> |
14 |
<script src="js/jquery.keyboard.extension-all.js"></script> |
2. Include other optional resources as per your needs.
1 |
<!-- jQuery UI Themes --> |
2 |
<script src="/path/to/cdn/jquery-ui.min.js"></script> |
3 |
<link rel="stylesheet" href="/path/to/cdn/jquery-ui.min.css" /> |
4 |
5 |
<!-- Or <a href="https://www.jqueryscript.net/tags.php?/Bootstrap/">Bootstrap</a> Theme --> |
6 |
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> |
7 |
8 |
<!-- Mousewheel support --> |
9 |
<script src="/path/to/jquery.mousewheel.js"></script> |
3. Include Keyboard plugin’s extensions if needed.
01 |
<!-- Show alternate keys in a popup --> |
02 |
<script src="js/jquery.keyboard.extension-altkeypopup.js"></script> |
03 |
<!-- Integrate with jQuery UI's autocomplete widget --> |
04 |
<script src="js/jquery.keyboard.extension-autocomplete.js"></script> |
05 |
<!-- Add a caret with custom styling --> |
06 |
<script src="js/jquery.keyboard.extension-caret.js"></script> |
07 |
<!-- Add a togglable layout --> |
08 |
<script src="js/jquery.keyboard.extension-extender.js"></script> |
09 |
<!-- Use with jQuery Mobile & jQuery Mobile --> |
10 |
<script src="js/jquery.keyboard.extension-mobile.js"></script> |
11 |
<!-- Use arrow, home, end & page up/down to navigate inside of the keyboard --> |
12 |
<script src="js/jquery.keyboard.extension-navigation.js"></script> |
13 |
<!-- Add a preview of chosen keysets; display & position of the preview is accomplished through css --> |
14 |
<script src="js/jquery.keyboard.extension-previewkeyset.js"></script> |
15 |
<!-- Scramble the entire keyset or by row, once or every time the keyboard is opened for added security --> |
16 |
<script src="js/jquery.keyboard.extension-scramble.js"></script> |
17 |
<!-- Allows you to simulate typing into the keyboard for demo purposes or to assist user input --> |
18 |
<script src="js/jquery.keyboard.extension-typing.js"></script> |
4. Attach the virtual keyboard to your element like textarea, input field, or contentEditable element.
1 |
<input id="keyboard" type="text"> |
1 |
$(function(){ |
2 |
$('#keyboard').keyboard({ |
3 |
// options here |
4 |
}); |
5 |
}); |
5. Available options to customize the virtual keyboard.
001 |
// set this to ISO 639-1 language code to override language set by the layout |
003 |
// language defaults to 'en' if not found |
004 |
language: null, |
005 |
rtl: false, |
006 |
007 |
// *** choose layout & positioning *** |
008 |
layout: 'qwerty', |
009 |
customLayout: null, |
010 |
011 |
position: { |
012 |
// optional - null (attach to input/textarea) or a jQuery object (attach elsewhere) |
013 |
of: null, |
014 |
my: 'center top', |
015 |
at: 'center top', |
016 |
// used when 'usePreview' is false (centers the keyboard at the bottom of the input/textarea) |
017 |
at2: 'center bottom' |
018 |
}, |
019 |
020 |
// allow jQuery position utility to reposition the keyboard on window resize |
021 |
reposition: true, |
022 |
023 |
// preview added above keyboard if true, original input/textarea used if false |
024 |
usePreview: true, |
025 |
026 |
// if true, the keyboard will always be visible |
027 |
alwaysOpen: false, |
028 |
029 |
// give the preview initial focus when the keyboard becomes visible |
030 |
initialFocus: true, |
031 |
032 |
// avoid changing the focus (hardware keyboard probably won't work) |
033 |
noFocus: false, |
034 |
035 |
// if true, keyboard will remain open even if the input loses focus, but closes on escape |
036 |
// or when another keyboard opens. |
037 |
stayOpen: false, |
038 |
039 |
// Prevents the keyboard from closing when the user clicks or presses outside the keyboard |
040 |
// the |
041 |
userClosed: false, |
042 |
043 |
// if true, keyboard will not close if you press escape. |
044 |
ignoreEsc: false, |
045 |
046 |
// if true, keyboard will only closed on click event instead of mousedown and touchstart
|
