Resizing Vitual Keyboard Interface v1.36

Virtual Keyboard Interface 1.36 is a javascript program to allow the addition of a virtual keyboard on your website. There are 5 options for sizes that the keyboard can be displayed. My project needed a virtual keyboard and this program worked all except the size f the keyboard. Mine was ment to be used with touchscreens so I needed the keyboard bigger so it was easier for a user to use it with a stylus or simply there fingers on the touchscreen so this is an outline of how to make the keyboard bigger than the options allow.

First of course you need to download and install the program the files are available for dowload below.
Add the keyboard.js, keyboard.css, and the keyboard.png files to the directory where the website is stored.

In each form field that you want the keyboard interface to be available add the line class="keyboardInput"
like this

<input name="login" type="text" id="login" class="keyboardInput" />

you must add the class="keyboardInput" option to each field you wish to have the keyboard be able to be used

Ok now we have it setup lets get to changing the size
first open the keyboard.css file and look for these lines

#keyboardInputMaster.keyboardInputSize1 * { font-size:9px; }
#keyboardInputMaster.keyboardInputSize3 * { font-size:13px; }
#keyboardInputMaster.keyboardInputSize4 * { font-size:16px; }
#keyboardInputMaster.keyboardInputSize5 * { font-size:28px; }

these are the sizes for each setting 1 - 5 which you can change as you can see I have chaged the last one to 28px this gives a bigger size than was previously available.Optionally you can change the size of all of the 5 options

Now if we go to the keyboard.js file we can adjust the default size it appears on our screen as
open keyboard.js and look for the following line

this.VKI_size = 5; // Default keyboard size (1-5)

this sets the default size which can be 1 - 5

Done right? No not yet if you now go to the website you will see the keyboard available but if you have it set to say the default size of 5 and have chaged the keyboard.css file to make it bigger you may see it is not bigger. If you now click on a different size and then back to 5 it now makes it bigger like it should be. Well what gives? Due to the way the program is structured it doesnt change the size until you click on the size option we dont want someone to have to do this everytime they are using our keyboard so now we fix it.

Go back to the keyboard.css file and look for this line

font:normal 28px Arial,sans-serif;

once again you can see I changed the line to read 28px this is the default size it brings up when the keyboard is first loaded and will fix our problem of the keyboard loading the incorrect size

Make sure it correspondes with the other settings you have changed in the files.

As an added feature we can disable the option that allows the user to change the keyboard size to do this take a look at the keyboard.js file again
find the line that reads

this.VKI_sizeAdj = true; // Allow user to adjust keyboard size

If you want to disable the option change TRUE to read FALSE make sure you leave the semicolon ( ; )

If you have any trouble or questions let me know leave me a comment, send an email, or use the contact section on this site. Hope you found this article useful