How to give focus when using keyboard tab?
<a class="ui-datepicker-prev ui-corner-all" data-handler="prev" data-event="click" title="Prev"><span class="ui-icon ui-icon-circle-triangle-w">Prev</span></a>
I tried using css like this
ui-datepicker-prev:focus { border:1px solid red}
But this doesn't work well. Anyone know ?
An <a> element without an [href] attribute is still valid. As far as semantics and styling is concerned, the <a> element isn't a link ( :link ) unless it has an [href] attribute. A side-effect of this is that an <a> element without [href] won't be in the tabbing order by default.
Bookmark this question. Show activity on this post. Now, when you are in the text box and you hit the tab key, the anchor tags gets focus, so if you immediately hit enter, you'll run the function closeZoom().
Using the "#" character as a placeholder basically makes the link "active." The browser interprets it as a tag that points to something else. If href is empty, the browser will assume the a tag is just another tag.
An a[href] element is a link (which is why they are matched with :link in css). links are clickable. An a element without the [href] attribute is otherwise just a placeholder for where a link might otherwise have been placed, and not clickable, nor are they in the tabbing order of the page.
First, class selector should start with a dot:
.ui-datepicker-prev:focus {border: 1px solid red; }
As for being able to use keyboard navigation for elements that are nonfocusable by default, setting tabindex="0"
attribute should help.
Either set tabindex="0" or specify href="javascript:;", It should be focusable.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With