Customize jQuery On-Screen Keyboard

Question

I need to display a virtual keyboard in some pages on my web-app, so I found this beautiful jQuery On-Screen Keyboard: http://www.jquery4u.com/demos/onscreenkeyboard/

You can download it from Github: https://github.com/sdeering/onscreenkeyboard/archive/master.zip

I need help to customize it, initially I thought that change CSS will do but turn out it need to be changed on some Jquery functions, I tried removing and changing the order of some functions but didn't work, I dont know Jquery so I am stuck.

For example here are some modifications I need to archive:

• Display upper key by default (right now it displays lower key) and don't give them the option key to turn on lower key.
• Remove Enter key

Can someone help me to figure out those 2 modifications above and give a brief explanation so I can get started and understand how to customize a key, I need a lot of modifications.

Answer 1

Display upper key by default

Add this code to your HTML document (AFTER it loads jquery, which it does on line 113) What this does is run the changeToCapitalLetter function, which will change the keyboard to the capital keys.

<script> $(document).ready(function() { jsKeyboard.changeToCapitalLetter(); }); </script>

Remove Enter key and don't give them the option key to turn on lower key.

replace lines 177 and 179 with the following code

{ value: "", isChar: "false", buttonClass: "button button_empty", keyClass: "key key_empty" },