Tweet
On my web page there are about 10 buttons are there. User doesn’t want to use mouse. Is there a way to use control keys
-
sridhar konkala -
Well your probably aware of this already, but the user can always hit 'Tab' and the focus will go from button to button. The button with focus will have a thin dotted line around it, hit 'Enter' when the button they want to use has focus and it's essentially the same as clicking
.
boxer_1
CodingForum Moderator
"How did a fool and his money get together in the first place?" -
Here's a simple example of how you can give focus to a particular button when the page has loaded. This way you can start the user on the button you choose and they can 'Tab' to the others from there:
<html>
<head>
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body onLoad="document.myForm.b3.focus()">
<form name="myForm">
<input name="b1" type="submit">
<br />
<input name="b2" type="submit">
<br />
<input name="b3" type="submit">
<br />
<input name="b4" type="submit">
<br />
<input name="b5" type="submit">
<br />
<input name="b6" type="submit">
<br />
</form>
</body>
</html>
Again, it's just a simple example, but it should give you the general idea. This particular example will start the user with focus on the third button. If they were to press enter right after the page loaded it would be like clicking the 3rd button .
Edit: This is assuming the most simple scenario, you may be looking for/need a more key specific solution. If so, let us know.
Last edited by boxer_1; Jun 21, 2002, 10:19 AM.boxer_1
CodingForum Moderator
"How did a fool and his money get together in the first place?"Comment
-
-
Certainly an option worth looking into:Originally posted by jkd
I'd investigate the two attributes, tabindex and accesskey.
http://www.w3.org/TR/html401/interac...html#h-17.11.1 (see "11.Giving focus to an element")
Accesskey specific:
However these solutions aren't very cross-browser, to the best of my knowledge anyway. As always, please correct me if I'm wrong
boxer_1
CodingForum Moderator
"How did a fool and his money get together in the first place?"Comment
-
I know they work in Gecko and Opera 6, as well as IE6.
And I'm pretty sure they work in Opera 5+, IE5+, and maybe even recent versions of Konqueror.
The only significant browser left out is NS4.Comment
-
In that case those are the probably the best options to consider, depending on the specific situation ksridhar69 is dealing with of course.Originally posted by jkd
I know they work in Gecko and Opera 6, as well as IE6.
And I'm pretty sure they work in Opera 5+, IE5+, and maybe even recent versions of Konqueror.
The only significant browser left out is NS4.
The only reason I brought up the browser compatibility issue is because I copied the source from one of the examples and tested it in IE 6 and it didn't appear to work. I only ran 1 quick test though, so the error was probably on my end. btw - jkd in the meantime, do you know where there's a working example/demo for testing? That would also give ksridhar69 a chance to see the option in action (just curious) .
boxer_1
CodingForum Moderator
"How did a fool and his money get together in the first place?"Comment
-
A valid XHTML 1.1 example of the accesskey and tabindex attributes on links. They work identically when dealing with form elements.Code:<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>accesskey and tabindex example</title> <style type="text/css"> a { display: block; color: blue; text-decoration: none; } a:first-letter { text-decoration: underline; } a:active { background: pink; color: white; } </style> </head> <body> <div> <a href="#" accesskey="h" tabindex="3">Hello</a> <a href="#" accesskey="w" tabindex="2">world.</a> <a href="#" accesskey="m" tabindex="1">Mighty fine example here.</a> </div> <div> The links tab in reverse order, and their accesskey is the first letter. In Windows, ALT+ACCESSKEY, in MacOS, CMD+ACCESSKEY. </div> </body> </html>
Comment
-
Very nice example jkd
!
boxer_1
CodingForum Moderator
"How did a fool and his money get together in the first place?"Comment
-
accessible menus
I'm trying to do something similar with menus. I had used accesskey on anchor tags in my DHTML menu. Unfortunately, this only causes the focus to transfer to the link when when the link is visible. If the menu is hidden (cause the user hasn't traversed to it) then the access key is ignored. I tried converting to flat buttons, but got the same result (buttons will do the onclick action when the accesskey is pressed, but only if they are visible).
I know I can do some archane incantations of javascript looking for key press and scanning each menu item for the correct access key. but...
Is there an easier way. For non-menu controls, accesskey moves the focus to that control, but for menus I want the accesskey to activate the menuitem, similarly to how accesskey works with the button tag.Wayne ChristianComment
Comment