Compact Visual Keyboard jQuery - Download Compact Visual Keyboard For Text Field - jQuery keyboard.js

Download Compact Visual Keyboard For Text Field – jQuery keyboard.js

By Posted on

This time I will share jQuery Plugin and tutorial about Compact Visual Keyboard For Text Field – jQuery keyboard.js, hope it will help you in programming stack.

Compact Visual Keyboard jQuery - Download Compact Visual Keyboard For Text Field - jQuery keyboard.js
File Size: 8.55 KB
Views Total: 1609
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Yet another visual keyboard plugin to create a custom keyboard icon next to your text field that toggles a QWERTY keyboard popup when needed.

How to use it:

1. Download and import the visual keyboard plugin’s JavaScript and CSS files into your page which has jQuery library loaded.

view source
1 <link rel="stylesheet" href="css/keyboard.css">
2 <script src="https://code.jquery.com/jquery-1.12.4.min.js"
3         integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
4         crossorigin="anonymous">
5 </script>
6 <script src="scripts/jquery.keyboard.js"></script>

2. Attach the visual keyboard to your input field and done.

view source
1 <form action="">
2   <input type="text" id="keyboardInput">
3 </form>
view source
1 $(function() {
2  
3   $("#keyboardInput").attachKeyboard();
4  
5 });

3. Override the default keyboard toggle icon.

view source
1 $(function() {
2  
3   $("#keyboardInput").attachKeyboard({
4     iconLocation: '/path/to/toggle.png',
5   });
6  
7 });

4. Specify the top and left offsets of the visual keyboard.

view source
1 $(function() {
2  
3   $("#keyboardInput").attachKeyboard({
4     topOffset : -42,
5     leftOffset : 20
6   });
7  
8 });

This awesome jQuery plugin is developed by shaneporter. For more Advanced Usages, please check the demo page or visit the official website.

source : jquery.net

Related posts: