PrimeFaces 手风琴面板键盘将焦点放在当前选项卡命令按钮上

Question

我有一个手风琴面板，上面有几个选项卡，在表格中。每个选项卡都有一个命令按钮（我使用更新和流程属性通过选项卡处理特定输入）。我在手风琴面板上将 multiple 属性设置为 true。当页面最初加载时，第一个选项卡默认处于打开状态。如果我在键盘上按回车键，则第一个选项卡中的命令按钮具有键盘焦点并处理字段。现在我打开第一个选项卡并打开另一个选项卡，然后按 Enter 键键盘焦点仍然在第一个选项卡上的命令按钮上。我尝试将 p：focus 与 for/context 属性一起使用，但没有帮助。

<h:form id="calculatorsNTools">
<p:accordionPanel multiple="true">
    <p:tab title="Teenage Check">
        <h:inputText id="age1" required="true" label="Age"
            value="#{calculatorBacking.age}" validatorMessage="Enter a value">
            <f:validateDoubleRange minimum="1" />
        </h:inputText>
        <p:message for="age1" id="msgage1" />
        <h:panelGrid columns="3" id="gridTAresult">
            <p:commandButton id="calculateTA"
                action="#{calculatorBacking.calculateTA}" value="Calculate"
                process="@this,age1"
                update="gridTAresult">
            </p:commandButton>
            <b> Teenage (y/n)</b>
            <h:outputLabel id="resultTA" value="#{calculatorBacking.resultTeenAge}"></h:outputLabel>
        </h:panelGrid>
         </p:tab>
    <p:tab title="Retirement Check">
            <h:inputText id="age2" required="true" label="Age"
                value="#{calculatorBacking.age}" validatorMessage="Enter a value">
                <f:validateDoubleRange minimum="1" />
            </h:inputText>
            <p:message for="age2" id="msgage2" />
            <h:panelGrid columns="3" id="gridREresult">
                <p:commandButton id="calculateRE"
                    action="#{calculatorBacking.calculateRE}" value="Calculate"
                    process="@this,age2"
                    update="gridREresult">
                </p:commandButton>
                <b> Retirement (y/n)</b>
                <h:outputLabel id="resultRE" value="#{calculatorBacking.resultRetirement}"></h:outputLabel>
            </h:panelGrid>
    </p:tab>
</p:accordionPanel>
<h:form>

Answer 1

你可以使用javascript来完成你想要的。我不完全确定如何在手风琴上做到这一点，但在tabView上它将是：

<p:tabView onTabChange="handleTabChange(event, index)">

然后创建一个 javascript 函数来设置焦点：

function handleTabChange(event, index){
    if(index == 1){
        var opControl = document.getElementById("calculatorsNTools:calculateTA");
        opControl.focus();
    }
}

您应该能够将其修改为手风琴面板所需的内容。