control keyboard with cursor keys

[c33s]

i have looked in the faq & read over the wiki but found nothing about it. i would need a virtual keyboard which is controlable by the cursor keys and an enter key, like on a remote control. is your keyboard capable of this?

[Mottie]

I'm not exactly sure what you mean by this... You can control the caret position inside of the keyboard manually using all of the navigation keys: arrow, page, home and end. You should even be able to use shift navigation keys for selection.

So do you mean reposition the caret using script from outside of the keyboard? I'm not sure I can picture what you mean so could you provide me an example on how it would be used?

[c33s]

thank you for you fast reply.

i only tested the keyboard on your demo page: http://mottie.github.com/Keyboard/ if i click on the "enter something" text box under "QWERTY Text" the keyboard appears. if i correctly understand you, i sould be able to move the blue box, http://www.c33s.net/github/vkeyboard.png (on this picture at the number "2"), with the arrow keys, but it don't work for me. with the mouse i can select which key i want to press and then i click the mouse button to add the letter into the text area. i would need the same behavior but without a mouse but a tv remote control http://upload.wikimedia.org/wikipedia/commons/d/d4/Generic-remote-control-shallow-focus.jpg .

is this possible with your vkeyboard out of the box?

functionality i would need:

• selecting (moving the blue box) over the letter i need to type with the cursor keys
• pressing the enter/ok key to add the letter to the textbox

i hope i descripted my request better than before :)

[Mottie]

Ahhh ok I understand now... I had an issue with this before in that it was originally made to allow using the tab key to cycle through the virtual keyboard keys. But then because the input lost focus, IE would completely forget where it was.

So, I think this might be possible just from thinking about it, but it would only work for text inputs and not textareas. How should I handle shift and alt key sets?

[c33s]

i should have added images right in my first post, they really help to descripe what i meant :)

tab would really quite unhandy to cycle through the keys, so i would add a setting like "use cursor keys for autocompletion" (i have seen you used them to select a word of the autocompletion) or "use cursor keys for blue-box movement"

how is the blue box called? cursor? caret?

if you control the blue box via the cursor arrows, the behavior of the shift, alt, .. keys should be exactly the same as via mouse control.

• with the mouse you click on shift, then click on the letter and get a caps letter from it.
• same would be with cursor keys, navigate the blue box to the shift key, then pressing enter -> shift gets locked (like with the mouse), then you navigate with the arrow keys to the letter you want to write in cap, press enter again and get it as cap letter in the textfield.

why would the navigation of the cursor key not work with an textarea? to be honest, i haven't viewed your code, i just tried the demo, read the wiki and thought about if you keyboard would match what i am looking for.

for my understanding i would navigate through form fields with tab or the cursor arrows. so i can jump from field to field with tab/arrows. if i enter a textarea or field the keyboard spawns. focus jumps to the virtual keyboard (not the textarea or input field).

• if i use the cursor keys i only navigate the blue box.
• with enter i add the currently selected char to the textarea/field.
• i also can add a "return" to add a line break. i do this until i am finished. then i navigate to the "accept" v-key with the arrow keys and press enter again. now the keyboard dissapears and the textarea/box has the focus again with the text inside. if i now press a arrow key the next form field gets the focus. if it is a textarea/field the game just starts again. keyboard open, ....

what do you think about that? is this possible with your cool keyboard out of the box? is it hacked in with just a few mods or do i have to go a complet different way?

[Mottie]

The blue box, as it is now, is just a "hovered" key. It highlights to allow better visualization.

One other problem that comes to mind are password type inputs. I made those specifically not show the highlight so people looking over your shoulder can't see what keys are being typed. How would the arrow navigation work with these types of inputs?

The main problem with making the arrow keys only work on the virtual keyboard is that you might want to navigate the caret inside of form element to insert or delete text. Yes, you can use the mouse to move the caret, but then why completely avoid the mouse for the method you are proposing.

Anyway, I was thinking I could just add an option that is an all or nothing sort of method or maybe just make an extension that would allow the arrows keys to make it so that they only act on the virtual keyboard. Then you don't use the extension if you want the arrows keys to navigate the caret inside of the form element.

What do you think?

[Mottie]

Hi C33s!

Ok, try the new navigation extension (demo here)

[c33s]

hi mottie,

wow your are fast :) haven't replied to your previous post and you post the ready solution. you rock :)

password fields

i think "no hightlighting" in "tv remote control"-mode (i call it trc-mode) is not possible. for the trc mode it has to be enough to simply not see the letters which were entered.

or maybe only make the border visible, instead of filling the whole box and maybe change the highlight color to a less eye-catching one (but keep in mind, that tvs maybe have a limited color space compared with a high quality monitor).

extension

really a good solution

navigation

for the navigation it is just the remote control, so you should think about navigation only with the cursor key and the ok button. there is no mouse on a remote control :)

to navigate in the text itself, it will be necessary to have also virtual arrow keys too. every key which to user should be able to press, have to be on the keyboard.

demo

i just tested your demo, the basic functionality works like charm, just had a few problems:

• when pressing the virtual-tab key no tab is inserted into the text input field (but i think thats intended for an text input field)
• sometimes the blue box "jumps" so if you are in the row one (1, 2, 3, 4, ...) and press the down arrow, you want to go to the 2nd row (tab, q, w, e, ...) but the blue box jumps to the 4th row (shift, z, x, c, ...). this bug is reproduceable on firefox 6.0.1 use only the real tab key to navigate to the input field, the vkeyboard pops out, navigate with the cursor keys to the v-"accept" button, again renavigate with the real tab key to the text field. i assume that i have to press the down arrow to get in the first row of the keyboard but the cursor stands on accept. also its not possible to navigate to all keys again. the blue box jumps from accept to cancel (skipping space), pressing up standing on cancel leads to a highlighted "w".
• also i tested your code on a textarea, there pressing the enter key for selecting a key on the virtual keyboard leads to an enter in the textarea.

[Mottie]

Hi c33s!

Ok, I guess I didn't prevent password field highlights with this extension. But it won't highlight when using a mouse hover.

Adding navigation arrows may work, but I'll have to think about it a bit more... I've had a lot of problems with caret positioning and it is especially troublesome to have the script change the position. So let me think about the best way to do this and I'll update the extension.

I haven't been able to replicate the problem you mention with the blue box jumping all over. The way the script works is that if you press up or down, it goes to the same index number key from the left side. If you want it to go in a straight line, then make all the buttons the same size.

I just updated the extension to fix the enter key problem - I thought it was more important than waiting for me to figure out how to deal with caret navigation. :)

[c33s]

hello,

your enhancement works very well. you have done a great job.

i will try to reproduce the bug i had with your new version, i will try to screencapture it. i hope i will have enough time next week, i have quite a lot of work right now.

thank you very much for your hard work

[Mottie]

Hi c33s!

Ok try the latest version. I added a toggle key (F1, which you can change) that switches between navigating the keyboard and inside the text/input area. I think that might be the best solution, what do you think?

The bug you were mentioning occurs when you open and close the keyboard more than once. Each time you do it, it adds another key that it jumps over - so that's been fixed too :)

[c33s]

hello,

you simply rock!

i will try the functionality on the tv box as soon as possible to give you better feedback if i can hook the f1 key. in my case i only need a "show keyboard" and a "hide keyboard" hook. if the keyboard is shown the focus is always on the keyboard. if i exit the keyboard the focus is back on the text area.

[Mottie]

If you are still having problems, please feel free to reopen this issue :)