How to Ignore HTML Element from Tabindex

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



Leave a reply



Submit