Side navigation
#11413 closed bug (invalid)
Opened February 28, 2012 06:29PM UTC
Closed February 28, 2012 08:45PM UTC
jQuery Attribute Selector Bug
Reported by: | Mike Murray <charliebrown928@hotmail.com> | Owned by: | |
---|---|---|---|
Priority: | low | Milestone: | None |
Component: | selector | Version: | 1.7.1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
http://jsfiddle.net/qD5Se/show/
At the above jsFiddle example, we have extremely simple markup:
<input tabindex="0" name="Username" /> <input tabindex="1" name="Password" /> <input type="hidden" name="Hidden" value="value" /> <input tabindex="2" type="submit" value="Submit" /> <a href="#" id="ForgotPassword">Forgot Password?</a>
When I do the following jQuery selectors in the JavaScript console of Chrome Dev Tools or Firebug...
$('[tabindex="0"]') $('[tabindex="0"]:visible')
...I get confusing results. The first selector does as I intended (i.e., select the single html element on the page that has an attribute of
tabindexwith a literal value of
0, which is the
Usernameinput text field). I would then expect the second selector to produce the same result, as it has the same selector but with one extra restriction that the element be visible. However, I actually get more results than the first, despite the more restrictive selector (i.e., it matches
Usernametext field but also matches the
ForgotPasswordanchor link as well).
It appears what happens is that when the
:visibleselector is added, the attribute selector is not doing a literal match anymore. When I do the same attribute selector, but without quotes...
$('[tabindex=0]') $('[tabindex=0]:visible')
...I now get all elements which effectively have a tab index of zero by default, not just the one that literally has the attribute in its markup (i.e., now we match the
Usernametext field and the
ForgotPasswordlink, and additionally the hidden input field in the case of the selector without the visibility check).
What I'm gathering is that when the
:visibleselector is appended to the attribute selector of
[tabindex="0"], it switches to behaving like the
[tabindex=0]attribute selector instead.
Attachments (0)
Change History (1)
Changed February 28, 2012 08:45PM UTC by comment:1
component: | unfiled → selector |
---|---|
priority: | undecided → low |
resolution: | → invalid |
status: | new → closed |
This is not a jQuery bug.
tabIndex="0" means:
https://developer.mozilla.org/en/Accessibility/Keyboard-navigable_JavaScript_widgets
You should begin your tabIndex with 1:
http://jsfiddle.net/mofle/qD5Se/1/