Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jun 2002
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    User don't want to use mouse on browser

    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

  • #2
    Regular Coder
    Join Date
    May 2002
    Location
    Maine, USA
    Posts
    573
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    CodingForums Moderator
    "How did a fool and his money get together in the first place?"

  • #3
    Regular Coder
    Join Date
    May 2002
    Location
    Maine, USA
    Posts
    573
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 06-21-2002 at 04:19 PM.
    boxer_1
    CodingForums Moderator
    "How did a fool and his money get together in the first place?"

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    I'd investigate the two attributes, tabindex and accesskey.

  • #5
    Regular Coder
    Join Date
    May 2002
    Location
    Maine, USA
    Posts
    573
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jkd
    I'd investigate the two attributes, tabindex and accesskey.
    Certainly an option worth looking into:

    http://www.w3.org/TR/html401/interac...html#h-17.11.1 (see "11.Giving focus to an element")

    Accesskey specific:

    http://www.w3.org/TR/html401/interac...adef-accesskey

    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
    CodingForums Moderator
    "How did a fool and his money get together in the first place?"

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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.

  • #7
    Regular Coder
    Join Date
    May 2002
    Location
    Maine, USA
    Posts
    573
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    In that case those are the probably the best options to consider, depending on the specific situation ksridhar69 is dealing with of course.

    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
    CodingForums Moderator
    "How did a fool and his money get together in the first place?"

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    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>
    A valid XHTML 1.1 example of the accesskey and tabindex attributes on links. They work identically when dealing with form elements.

  • #9
    Regular Coder
    Join Date
    May 2002
    Location
    Maine, USA
    Posts
    573
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Very nice example jkd !
    boxer_1
    CodingForums Moderator
    "How did a fool and his money get together in the first place?"

  • #10
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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 Christian


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •