In theory if you add a tabindex="0" to the elements you want keyboard
focus for you should be able to tab to them and they will get key
events.
Karl Rudd
On 3/23/07, Dan Eastwell <[EMAIL PROTECTED]> wrote:
> That's a nice hack Karl, and after reading the W3C spec, I'm inclined
> to agree that browser interpretation of what a click is, is its own
> thing. I've found that IE and firefox assign click only to focused
> anchors when return is hit.
>
> I've got round it in a slightly different way by finding all the
> elements I'd like to act as event handlers and wrapping an empty <a
> href="#"></a> around the text. Frankly, I think yours is less of a
> problem (what with my method meaning that inherited styles), unless
> there's varying interpretation of what keyCode 13 is (I'm thinking of
> character sets, specifically).
>
> Thanks for your input, though, and I'm likely to look into this in the
> future, as I'm more than likely to need click events on things that
> aren't links, and they'll have to be keyboard driven, too.
>
> On 3/22/07, Karl Rudd <[EMAIL PROTECTED]> wrote:
> > I think you'll find that the "click" event being fired on "enter" is
> > actually more of a "standard hack" from browser makers. I'm guessing
> > this was done mainly because keyboard events are so undersupported by
> > website developers. Thus for some "standard" elements that get
> > keyboard focus the support was added for firing "click" on enter.
> >
> > You'll just have to add in the "hack" yourself, like this:
> >
> > $("p").keyup( function(e) {
> > if ( e.keyCode == 13 ) {
> > alert("Hello");
> > return false;
> > }
> > return true;
> > });
> >
> > Karl Rudd
> >
> > On 3/22/07, Dan Eastwell <[EMAIL PROTECTED]> wrote:
> > > Using the file below, I'm trying to work out why elements on my page
> > > that are acting as event 'handles', do not fire the click event (i.e.
> > > alert("Hello"); ) when tabbed into and the return/enter button
> > > pressed.
> > >
> > > The first paragraph can have focus and be 'clicked' with the keyboard,
> > > but no alert fires. The second paragraph's <a> element gets focus next
> > > when tabbed into and will cause the alert when return is pressed. The
> > > third tab element, <a> in blockquote, doesn't cause the alert to
> > > popup, as is expected.
> > >
> > > Can anyone explain to me why the first paragraph won't work as an
> > > event 'handle' when using the keyboard and click(function)? Is there
> > > another way of assigning an event to an element that's not an <a> when
> > > using the keyboard (not keyup, etc, because it should be the return
> > > key that fires the event, not 'any' key).
> > >
> > > Many thanks for your help,
> > >
> > > Dan.
> > >
> > >
> > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
> > > <html xmlns="http://www.w3.org/1999/xhtml"; lang="en">
> > > <head>
> > > <title>Click test</title>
> > > <meta http-equiv="content-type" content="text/html;charset=utf-8"
> > > />
> > > <meta http-equiv="content-language" content="en-gb" />
> > >
> > > <script type="text/javascript"
> > > src="../../_functions/js/libraries/jquery.js"></script>
> > > <script type="text/javascript">
> > > $(document).ready(function() {
> > > $("p").click( function() { alert("Hello"); } );
> > > });
> > > </script>
> > >
> > > </head>
> > >
> > > <body>
> > >
> > >
> > > <p tabindex="1">Sed ut perspiciatis unde omnis iste natus
> > > error sit
> > > voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
> > > ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
> > > dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
> > > aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
> > > qui ratione voluptatem sequi nesciunt.</p>
> > >
> > > <p>Neque porro quisquam est, qui dolorem ipsum quia dolor
> > > sit amet,
> > > consectetur, adipisci velit, sed quia non numquam eius modi tempora
> > > incidunt ut labore et dolore <a href="/">magnam aliquam quaerat
> > > voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
> > > ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
> > > consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
> > > velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum
> > > fugiat quo voluptas nulla pariatur?</a></p>
> > >
> > > <blockquote>Neque porro quisquam est, qui dolorem ipsum
> > > quia dolor
> > > sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
> > > tempora incidunt ut labore et dolore <a href="/">magnam aliquam
> > > quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
> > > exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex
> > > ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
> > > ea voluptate velit esse quam nihil molestiae consequatur, vel illum
> > > qui dolorem eum fugiat quo voluptas nulla pariatur?</a></blockquote>
> > >
> > >
> > > </body>
> > > </html>
> > >
> > >
> > >
> > >
> > > --
> > > Daniel Eastwell
> > >
> > > Portfolio and articles:
> > > http://www.thoughtballoon.co.uk
> > >
> > > Blog:
> > > http://www.thoughtballoon.co.uk/blog
> > >
> > > _______________________________________________
> > > jQuery mailing list
> > > [email protected]
> > > http://jquery.com/discuss/
> > >
> >
> > _______________________________________________
> > jQuery mailing list
> > [email protected]
> > http://jquery.com/discuss/
> >
>
>
> --
> Daniel Eastwell
>
> Portfolio and articles:
> http://www.thoughtballoon.co.uk
>
> Blog:
> http://www.thoughtballoon.co.uk/blog
>
> _______________________________________________
> jQuery mailing list
> [email protected]
> http://jquery.com/discuss/
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
