Quick Integrate Virtual On Screen Keypad on Your Website

by Posted on

In this tutorial I am going to share jQuery Plugin to Quick Integrate Virtual On Screen Keypad on Your Website. A virtual On-Screen keyword allow user to type text without the need of physical keyboard access. Generally in banking sites you might have seen virtual keyboard by using that we can enter text in required fields.An on-screen virtual keyboard embedded within the browser window which will popup when a specified entry field is focused.
virtual-keypad


Integrate Virtual On Screen Keypad on Your Website

Follow bellow steps to Quick Integrate Virtual On Screen Keypad on Your Website.

Libraries

Add latest jquery core lib with plugins (JS+CSS) libraries.

<!--CSS-->
<link rel="stylesheet" type="text/css" href="jQKeyboard.css">
 
<!--JS-->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jQKeyboard.js"></script>

HTML

Create simple input box where onfocus need to popup virtual keyword.

<input type = "text" id="testInput" class = "jQKeyboard" placeholder="testing" value="" />



JS

Finally call the plugin to create onscreen keyboard.

        <script type="text/javascript">
            $(function(){
                var keyboard = {
                    'layout': [
                        // alphanumeric keyboard type
                        // text displayed on keyboard button, keyboard value, keycode, column span, new row
                        [
                            [
                                ['`', '`', 192, 0, true], ['1', '1', 49, 0, false], ['2', '2', 50, 0, false], ['3', '3', 51, 0, false], ['4', '4', 52, 0, false], ['5', '5', 53, 0, false], ['6', '6', 54, 0, false], 
                                ['7', '7', 55, 0, false], ['8', '8', 56, 0, false], ['9', '9', 57, 0, false], ['0', '0', 48, 0, false], ['-', '-', 189, 0, false], ['=', '=', 187, 0, false],
                                ['q', 'q', 81, 0, true], ['w', 'w', 87, 0, false], ['e', 'e', 69, 0, false], ['r', 'r', 82, 0, false], ['t', 't', 84, 0, false], ['y', 'y', 89, 0, false], ['u', 'u', 85, 0, false], 
                                ['i', 'i', 73, 0, false], ['o', 'o', 79, 0, false], ['p', 'p', 80, 0, false], ['[', '[', 219, 0, false], [']', ']', 221, 0, false], ['&#92;', '\\', 220, 0, false],
                                ['a', 'a', 65, 0, true], ['s', 's', 83, 0, false], ['d', 'd', 68, 0, false], ['f', 'f', 70, 0, false], ['g', 'g', 71, 0, false], ['h', 'h', 72, 0, false], ['j', 'j', 74, 0, false], 
                                ['k', 'k', 75, 0, false], ['l', 'l', 76, 0, false], [';', ';', 186, 0, false], ['&#39;', '\'', 222, 0, false], ['Enter', '13', 13, 3, false],
                                ['Shift', '16', 16, 2, true], ['z', 'z', 90, 0, false], ['x', 'x', 88, 0, false], ['c', 'c', 67, 0, false], ['v', 'v', 86, 0, false], ['b', 'b', 66, 0, false], ['n', 'n', 78, 0, false], 
                                ['m', 'm', 77, 0, false], [',', ',', 188, 0, false], ['.', '.', 190, 0, false], ['/', '/', 191, 0, false], ['Shift', '16', 16, 2, false],
                                ['Bksp', '8', 8, 3, true], ['Space', '32', 32, 12, false], ['Clear', '46', 46, 3, false], ['Cancel', '27', 27, 3, false]
                            ]
                        ]
                    ]
                }
                $('input.jQKeyboard').initKeypad({'keyboardLayout': keyboard});
            });
        </script>

See live demo and download source code.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.



Published by admin