p:selectOneButton选项卡索引在primefaces 5.0中不工作

p:selectOneButton选项卡索引在primefaces 5.0中不工作,primefaces,tabindex,Primefaces,Tabindex,我使用的是PrimeFaces5.0p:selectOneButton元素在我在页面中四处切换时被完全跳过。下面是代码片段。 是否有人能让tabindex与p:selectOneButton一起工作 <p:selectOneButton tabindex="50" id="orderAction" value="#{orderController.side}" onchange="toggleBuySell();"> <f:selectItems value="#{or

我使用的是PrimeFaces5.0
p:selectOneButton元素在我在页面中四处切换时被完全跳过。下面是代码片段。
是否有人能让tabindex与p:selectOneButton一起工作

<p:selectOneButton tabindex="50" id="orderAction" value="#{orderController.side}" onchange="toggleBuySell();">
    <f:selectItems value="#{orderDataContainer.actionTypes}"/>
    <p:ajax event="change" update=" messages" process="@this " listener="#{orderController.validateAction}" oncomplete="someAction();"/>
</p:selectOneButton>

我在评论中提出的建议不起作用,passTour属性没有添加到输入元素中。 但是,您可以使用一些jQuery来实现这一点:

将widgetVar设置为selectOneButton
将其输入迭代到:
删除它们的隐藏属性(否则它们将不可标记)
将它们移出屏幕
绑定焦点和模糊事件以突出显示相应的按钮(即div)


tabindex不是p:selectOneButton的属性。您可以尝试使用pass-through属性:
@zim:这可能会起作用,但您是否可以访问select then中的每个按钮?@Kukeltje:我不这么认为。。。为了访问每个按钮,可能需要执行以下操作:
(这未经测试!)这会选择第一个按钮,但在制表符上,控件不会移动到下一个按钮(选择项),而是移动到其他元素。刚刚在Primefaces showcase上进行了测试,它确实按预期工作。您可以检查选项卡索引值。。。如果您有多个selectOneButton可应用此功能,请使用全局计数器而不是
.attr('tabindex',50+index)
它可以工作,但只能部分工作。由于这只会将焦点放在第一个按钮上,在第一个按钮后的tab out上,其他按钮会被跳过(尽管我可以看到您的查询设置的tabindex)。在Shift tab上,焦点会转到最后一个按钮。进一步的shift选项卡跳过其他按钮。不确定如何解决这个问题我想您可能需要检查是否有多个元素具有相同的tabindex。您可以使用以下命令列出它们:
$('*[tabindex]')。每个(function(){console.log(this)})
<p:selectOneButton widgetVar="orderActionWidget" id="orderAction" value="#{orderController.side}" onchange="toggleBuySell();">
    <f:selectItems value="#{orderDataContainer.actionTypes}"/>
    <p:ajax event="change" update=" messages" process="@this " listener="#{orderController.validateAction}" oncomplete="someAction();"/>
</p:selectOneButton>
PF('orderActionWidget').buttons.find('input').each(function(index, value) {
    $(value)
    .attr('tabindex', 50 + index)
    .removeClass('ui-helper-hidden')
    .css('position', 'absolute')
    .css('left', '-1000px')
    .bind({
    focus : function() {
        $(this).parent().addClass('ui-state-hover');
    },
    blur : function() {
        $(this).parent().removeClass('ui-state-hover');
    }
    });
});