Email conversation
| From | Richard Garcia |
|---|
| To | Me |
|---|
| Subject | virtual keyboard - initKeyEvent |
|---|
| Date | 23 April 2007 20:12 |
|---|
Hi Mark,
I'm trying to create a virtual keyboard on a site using FireFox where the
user hits buttons to simulate arrow keys (right, left, up, and down), on a
form element ( select box, input box, or text box). This is an internal
application where a regular keyboard won't be able to be used, just the
virtual one. Anyway, I can capture the keycode for the key event (for
instance, the down arrow is 40), but how do I add that keyevent to the
element in focus? On your website you have an example of capturing the
keyevent using initKeyEvent, but I can't figure out how to add the event to
the form element. Can you point me in the right direction? This is driving
me nuts, and I can't find a good example on the internet anywhere. Thank you
for your time.
P.S. If you need too look at my code I can send it to you. I didn't because
it probably isn't worthy of even looking at it since I can't even come close
to figuring this out.
Thanks,
Richard
| From | Me |
|---|
| To | Richard Garcia |
|---|
| Subject | Re: virtual keyboard - initKeyEvent |
|---|
| Date | 24 April 2007 15:51 |
|---|
Richard,
> On your website you have an example of capturing the keyevent using
> initKeyEvent
Firing, not capturing. Capturing is a very different thing :)
> but how do I add that keyevent to the element in focus?
You can't. As I say in the tutorial, all you can do is to create and fire
the event and trigger any scripts that are listening for it, but that will
not produce the default action of the event - in this case to type in the
input or move the caret.
If you want to manipulate the value, you must do that yourself by modifying
the .value property. Similarly, you must reposition the cursor yourself as
well. This is best done with the setSelectionRange method, as shown here:
http://www.howtocreate.co.uk/emails/MahithaKancherla.html
And adding text must then also be done using those methods, as shown here,
if you want to insert it at the caret position:
http://www.howtocreate.co.uk/emails/Armand.html
Of course, you will not be able to work with up/down arrows inside the
textarea, unless you have enabled some form of wrapping that lets you work
out exactly how many characters into the current line the caret is
positioned at, and how many characters to move it to position it at the same
position on the next line. Soft linewraps do not show up in the value, so
I'm not sure if there is a way you can work with that.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Richard Garcia |
|---|
| To | Me |
|---|
| Subject | Re: virtual keyboard - initKeyEvent |
|---|
| Date | 24 April 2007 19:25 |
|---|
Mark,
Thank you for your quick reply. I understand that to manipulate the value, I
must do that by modifying the .value property. Thank you for the links, I'm
sure that will help me solve the input and text box questions I had on
manipulating the values.
What I don't understand is if I have a select box, how do I simulate an up
or down arrow keypress on that element from a simulated button? To do that,
do I have to manipulate the value on that element or do I have to manipulate
the cursor position, or is it something else all together? Sorry for the
noob questions but I'm still learning javascript. Any help you can provide
will be greatly appreciated.
Thank you,
Richard
| From | Me |
|---|
| To | Richard Garcia |
|---|
| Subject | Re: virtual keyboard - initKeyEvent |
|---|
| Date | 24 April 2007 22:42 |
|---|
Richard,
> if I have a select box, how do I simulate an up or down arrow keypress on
> that element from a simulated button?
Simply change the .selectedIndex property for them (this will be -1 by
default if nothing is selected). Check first that you will not step off the
ends.
up arrow:
if( foo.selectedIndex > 0 ) {
foo.selectedIndex--;
}
down arrow:
if( foo.selectedIndex < foo.options.length - 1 ) {
foo.selectedIndex++;
}
Will probably help to set the size of the input to more than one, so they
get a better chance to see the available options.