Question

是否有可能提供<button></button> tabindex值并使其可以集中在 Safari Mobile？我正面临这个非常奇怪的问题我正在努力的网站上您有几个选项：
<select></select>选项用户可以选择哪个选项。 但是他们无法选择<button></button> < / strong>（这是DOM中的下一个元素），而不是标记到下一个<input>字段。所以我开始得出这个元素不可聚焦的东西。

我在想，也许最好的解决方案是在<input>一个tabindex为-1之后给<select>，这样用户就不能在最后一个字段之后标记。

任何建议都会很棒？或者，如果有一种方法可以使<button>元素选项卡在safari中可导航，我很想听听你是如何使用它的。

谢谢！

Answer 1

这可以通过JQuery和JavaScript实现。我现在只能提供一个JS示例（如果您愿意，我将使用JQuery）。

基本上，您找到所选的标签/按钮，然后找到下一个标签/按钮。信息：您需要有一个函数，A）在单击时将全局变量tabid设置为当前选项卡ID，或者B）让每个选项卡无关地将变量tabid设置为自定义值。

document.getElementBydId("idOfYourNav").onkeydown = function(event) {
    var tabs = ["idoftab1","idoftab2","idoftab3","idoftab1"]  
    if(event.keyCode==9) {                     // check to see if the key was a tab key
        event.preventDefault()                 // prevent the browser from navigating out of the nav.
        var oldId = tabid                      // get the oldid
        var oldindex = tabs.indexOf(oldid)     // get first occurrence of old id
        var newindex = oldindex+1              //get the new index
        var newid = tabs[newindex]             // get next id
        document.getElementById(newid).focus() // focus that tab
    }
}

function settab(tab){
    tabid=tab
}

HTML：

<html>
    <div id="idOfYourNav">
        <button id="tab1" onclick="settab('tab1')"></button>
        <button id="tab2" onclick="settab('tab2')"></button>
        <button id="tab3" onclick="settab('tab3')"></button>
    </div>
</html>

＆＃13;

    document.getElementById("idOfYourNav").onkeydown = function(event) {
    
        var tabs = ["tab1","tab2","tab3","tab1"]  
        if(event.keyCode==9) { 
        event.preventDefault()                    // check to see if the key was a tab key
            var oldId = tabid                      // get the oldid
            var oldindex = tabs.indexOf(oldId)     // get first occurrence of old id
            var newindex = oldindex+1              //get the new index
            var newid = tabs[newindex]             // get next id
            console.log(newid)
            document.getElementById(newid).focus() // focus that tab
            tabid=newid
        }
    }

    function settab(tab){
        tabid=tab
    }

＆＃13;

<html>
        <div id="idOfYourNav">
            <button id="tab1" onclick="settab('tab1')">tab1</button>
            <button id="tab2" onclick="settab('tab2')">tab2</button>
            <button id="tab3" onclick="settab('tab3')">tab3</button>
        </div>
    </html>

＆＃13;

safari mobile中奇怪的tabindex问题

1 个答案: