Question

我有一个手风琴面板，表格中有几个标签。每个选项卡都有一个命令按钮（我使用更新和进程属性来处理带有选项卡的特定输入）。我在accordion面板上将multiple属性设置为true。页面最初加载时，默认情况下打开第一个选项卡。如果我按下键盘上的回车键，则第一个选项卡中的命令按钮具有键盘焦点并处理字段。现在我打开第一个选项卡并打开另一个选项卡，然后按下回车键，键盘焦点仍然在第一个选项卡上的命令按钮上。我尝试使用p：focus with 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();

    }
}

您应该可以将其修改为accordionPanel所需的内容。

PrimeFaces Accordion面板键盘专注于当前选项卡命令按钮

1 个答案: