将所有 tabindex 属性删除到 html 元素的最佳方法是什么

Question

从html元素中删除所有tabindex属性的最佳方法是什么？GWt 似乎将此属性放在代码中的任何位置，即使它没有设置在代码中的任何位置。它将 tabindex 设置为 -1。

我有下面的代码可以工作，但这很乏味，因为我必须根据其标签名称搜索每个元素，这会减慢页面加载速度。还有其他建议吗？我宁愿该解决方案不使用javascript，因为我是新手。

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

Answer 1

我不完全确定你在问什么。要删除选项卡索引属性。您要么：

• 在 HTML 中手动将 tabindex 属性设置为 -1。
• 使用已有的代码。
• 或者在另一个线程中使用简化的 JQuery 版本。

也许我误解了你想要实现的目标？

编辑

好吧，也许这个：

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

这应该删除它，而不是将其设置为 -1...希望如此。对不起，如果我又误会了！

JQuery removeAttr Link

Answer 2

使用

querySelectorAll 函数，该函数返回文档中与指定选择器组匹配的元素列表（使用文档节点的深度优先预序遍历）。

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

Answer 3

我终于想通了。

我尝试了 Javascirpt/jquery，但他们无法删除选项卡索引，因为页面尚未完全呈现 - 我的面板在 window.load 之后以编程方式放置。我所做的是利用 gwt 的RootPanel.class（它已经被使用，但我不知道）。

任务：要删除所有值为 -1 的 tabindex，为所有脚本标签添加 type="tex/javascript"，为样式标签添加 type="text/css"，为所有 img 标签添加一个 alt。这些都是为了 html 验证。

我

不确定这是最好的方法，它肯定会增加加载缓慢，但客户坚持要我这样做。所以这里是：

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