How to ignore HTML element from tabindex?
You can use tabindex="-1"
.
The W3C HTML5 specification supports negative tabindex
values:
If the value is a negative integer
The user agent must set the element's tabindex focus flag, but should not allow the element to be reached using sequential focus navigation.
Watch out though that this is a HTML5 feature and might not work with old browsers.
To be W3C HTML 4.01 standard (from 1999) compliant, tabindex would need to be positive.
Sample usage below in pure HTML.
<input /><input tabindex="-1" placeholder="NoTabIndex" /><input />
Explicitly exclude an html element from the tab order
Setting the tabindex
to -1 will render an element untabbable (if that's a word) :)
<input type="text" name="username" tabindex="-1" />
Can I ignore some website element when navigating using the tab key?
You can set the tabindex="-1"
on this element so it's ignored in the tab order. 0
tells the browser to figure out the tab order on it's own, -1
tells the browser to ignore it.
What is the best way to remove all tabindex attribute to html elements?
I finally figured it out.
I tried Javascirpt/jquery but they couldn't remove tabindexes because the page was not fully rendered yet - my panels are placed programmatically after window.load
. What I did is make use of the RootPanel.class
of gwt (which was being used already, but I didn't know).
The task: to get rid of all tabindex with -1 value, add type="tex/javascript" for all script tags, type="text/css" for style tags and out an alt to all img tags. These are all for the sake of html validation.
I am not sure this is the best way, it sure does add up to slow loading, but client is insisting that I do it. So here it is:
RootPanel mainPanel = RootPanel.get(Test_ROOT_PANEL_ID);
Widget widget = (Widget) getEntryView();
mainPanel.add((widget));
// Enable the view disable the loading view. There should always be
// the loading panel to disable.
Element mainPanelelement = DOM.getElementById(Test_ROOT_PANEL_ID);
Element loadingMessage = DOM.getElementById(LOADING_MESSAGE);
Element parent = loadingMessage.getParentElement();
if(parent!=null)
{
//i had to use prev sibling because it is the only way that I know of to access the body //tag that contains the scripts that are being generated by GWT ex.bigdecimal.js
Element body = parent.getPreviousSibling().getParentElement();
if(body!=null)
{
NodeList<Element> elms = body.getElementsByTagName("*");
if(elms.getLength()>0)
{
Element element=null;
for(int i=0; i<=elms.getLength(); i++)
{
if(elms.getItem(i)!=null)
{
element = elms.getItem(i);
if(element.getTagName().compareToIgnoreCase("script")==0)
element.setAttribute("type", "text/javascript");
else if(element.getTagName().compareToIgnoreCase("style")==0)
element.setAttribute("type", "text/css");
else if(element.getTagName().compareToIgnoreCase("img")==0)
{
if(element.getAttribute("alt")=="")
element.setAttribute("alt", element.getAttribute("title")!=" " ? element.getTitle() : " " );
}
else
{
if(element.getTabIndex()<=0)
element.removeAttribute("tabindex");
}
}
}
}
}
}
DOM.setStyleAttribute((com.google.gwt.user.client.Element) loadingMessage, "display", "none");
DOM.setStyleAttribute((com.google.gwt.user.client.Element) mainPanelelement, "display", "inline");
// Change cursor back to default.
RootPanel.getBodyElement().getStyle().setProperty("cursor", "default");
}
Javascript/JQuery remove from tabindex
You can achieve this with html:
<p>
<input type="text" name="field1" id="field1" value="" />
<a href="#" id="link1" tabindex="-1">more info</a>
</p>
<p>
<input type="text" name="field2" id="field2" value="" />
</p>
You could also use jquery to do this:
$('#link1').prop('tabIndex', -1);
Related Topics
How to Change or Remove Html5 Form Validation Default Error Messages
Make Background Color Extend into Overflow Area
Manually Triggering Form Validation Using Jquery
Ie8 Support For CSS Media Query
How to Use Div as a Direct Child of Ul
Invert CSS Font-Color Depending on Background-Color
Css :Selected Pseudo Class Similar to :Checked, But For ≪Option≫ Elements
Html/Css Triangle With Pseudo Elements
Is There an Equivalent to Background-Size: Cover and Contain For Image Elements
Uri Starting With Two Slashes ... How Do They Behave
Do You Put Schema Microdata Meta Tags in the HTML Body
Default Select Option as Blank
How to "Disable" Zoom on a Mobile Web Page
Is There a W3C Valid Way to Disable Autocomplete in a HTML Form