What is the best way to remove all tabindex attribute to html elements?

Question

What is the best way to remove all tabindex attributes from html elements? GWt seems to put this attribute even it is not set anywhere in the code. It sets tabindex to -1.

I have the code below as working but it is tedious because I have to search every element according to its tag name and that slows the page loading. Any other suggestions? I'd prefer the solution not use javascript, as I am new to it.

        NodeList<Element> input =  this.getElement().getElementsByTagName("input");

        if(input.getLength()>0)
        {
            for(int i=0; i<=input.getLength(); i++)
            {

                    input.getItem(i).removeAttribute("tabIndex");

            }

        }
        NodeList<Element> div =  this.getElement().getElementsByTagName("div");

        if(div.getLength()>0)
        {
            for(int i=0; i<=div.getLength(); i++)
            {

                    div.getItem(i).removeAttribute("tabIndex");

            }

        }

Is this what you are looking for? [javascript-jquery-remove-from-tabindex][1] [1]: http://stackoverflow.com/questions/1987927/javascript-jquery-remove-from-tabindex — Danny, Jun 26 '12 at 09:55
sorry no. I want remove the tabindex totally. I actually read that one already before I posted here. thanks though. — user742102, Jun 26 '12 at 09:58
you could also just completely disable the tab key on the page. — user1133275, Feb 26 '16 at 17:38

score 8 · Answer 1 · edited May 23 '17 at 12:16

8

I'm not entirely sure what you are asking then. You want to remove the tab index attribute. You either:

set the tabindex attribute to -1 manually in the HTML.
use the code you already have.
or use the simplified JQuery version in the other thread.

Perhaps I have misunderstood what you are trying to achieve?

EDIT

Okay perhaps this:

$(document).ready(function(){
    $('input').removeAttr("tabindex");
});

This should remove it rather than set it to -1... hopefully. Sorry if I've misunderstood again!

JQuery removeAttr Link

edited May 23 '17 at 12:16

Community

1
1

answered Jun 26 '12 at 10:12

Danny

468
2
7

the other thread set the tabindex=-1, which I already have and I want to remove all tabindex that has -1 value as html says it is invalid. it should be from 0-32767 like what was commented in that same thread. Instead of making it a positive value like zero, i just want to remove it entirely. Right now, I'm doing it manually per panel in which I have like a dozen(phew!).thanks. – user742102 Jun 26 '12 at 10:34
the $(document).ready(function(){} would not help since the panels are set programmatically. it already calls the function but the panels are not yet in there so I had to do it in the code right after adding all the panels..thanks for helping though. :) – user742102 Jun 28 '12 at 08:15

score 0 · Accepted Answer · edited Aug 24 '18 at 12:05

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");
    }

score 0 · Answer 3 · answered Jun 27 '16 at 10:01

Use querySelectorAll function which Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors.

function removeTagAttibute( attributeName ){
    var allTags = '*';
    var specificTags = ['ARTICLE', 'INPUT']; 

    var allelems = document.querySelectorAll( specificTags );
    for(i = 0, j = 0; i < allelems.length; i++) { 
        allelems[i].removeAttribute( attributeName );
    }
}

removeTagAttibute( 'tabindex' );

Your code is not correct. allTags has no purpose. Nor does j. and i needs to be a variable. — knalle, Jun 17 '22 at 07:59

What is the best way to remove all tabindex attribute to html elements?

3 Answers3