Large

Virtual Keyboard Interface

By GreyWyvern Last update Nov 8, 2011 — Installed 53,285 times.

Positioning Keyboard

in
Subscribe to Positioning Keyboard 3 posts, 2 voices



Fly_Moe User
ieWindows

I was wondering how do I position the Keyboard somewhere on my page other than right below the input box? I've got it set up where the keyboard opens up when the user clicks in the input box, but I'd like the keyboard to open in a fixed position on the page for every input box. I'm still learning javascript and CSS so it's probably something easy that I'm missing. Thanks for any help you can provide.

The keyboard rocks by the way!! Just what I needed.

 
Fly_Moe User
FirefoxWindows

I figured out how to position the keyboard. All I needed to do was change self.VKI_keyboard.style.top and self.VKI_keyboard.style.left. So it looks something like:

self.VKI_keyboard.style.top = "170px";
self.VKI_keyboard.style.left = "-10px";

Now some other questions.

I was able to remove the language drop down but for some reason can't figure out how to remove the check box for the dead keys. I don't want that showing up on the keyboard.

Like I said n my previous post, I have it set up where the user clicks in the input box and the keyboard shows up. I need to set it up where the user can click any where out side of the input box (except the keyboard of course) and the keyboard will disappear. How would I do that?

Finally, I need to add arrow keys (up, down, left, right) on the keyboard as well. I would like to place that to the right of the space bar key. Any suggestions on how to add that functionality?

I'm going to mess around with this and see if I can figure it out. But any help you can provide will be greatly appreciated. Thanks.

 
GreyWyvern Script's Author
OperaWindows

There is currently no global option to remove the deadkey checkbox. You will either have to remove the code that generates the checkbox from the "Build the keyboard interface" section, or disable it on a keyboard by keyboard basis using the DDK = true syntax (see the "Create keyboards" section in the source for more details).

To make the keyboard disappear when the user clicks somewhere else in the document, you'll need to do three things:
- Add a listener for the click event to the document which calls the VKI_close method.
- Add a click listener to the VKI_keyboard element which stops the event from bubbling (or propagating) up to the document, so that clicks on the keyboard itself won't close it. You can do this with e.stopPropagation(); for Opera and Firefox, and e.cancelBubble = true; for IE.
- Add a click listener to the focused input element so that clicks there also do not close the keyboard, as above. You will probably want to remove this event listener when the keyboard is closed.

As for arrow keys, there are cross-browser issues related to "faking" the actions of these keys that are outside the scope of the keyboard script. As it is meant to allow you to fill input elements with mouse only, you can use the mouse to move the cursor around directly, rather than clicking arrow keys.

Cross
Presentational HTML allowed.
Use <code> for inline code and <pre> for code blocks. Use &lt; and &gt; for literal < and >.
We help break paragraphs and link your links.
or cancel