CODEWITHSUNDEEP
htmlgwttabindex
user742102
user742102

Reputation: 1365

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

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

            }

        }

Upvotes: 2

Views: 25806

Answers (3)

user742102
user742102

Reputation: 1365

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

Upvotes: 0

Yash
Yash

Reputation: 9568

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' );

Upvotes: 0

Danny
Danny

Reputation: 468

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

Upvotes: 8

Related Questions