0

form 内にいくつかのタブがあるアコーディオン パネルがあります。各タブにはコマンド ボタンがあります (更新属性と処理属性を使用して、タブで特定の入力を処理します)。アコーディオン パネルで multiple 属性を true に設定しました。ページが最初にロードされると、デフォルトで最初のタブが開きます。キーボードの Enter キーを押すと、最初のタブのコマンド ボタンにキーボード フォーカスがあり、フィールドが処理されます。ここで、最初のタブを開いたままにして別のタブを開き、Enter キーを押します。キーボード フォーカスは最初のタブのコマンド ボタンのままです。for/context 属性で p:focus を使用しようとしましたが、助けがありませんでした。

<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>
4

1 に答える 1

0

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に必要なものに変更することができるはずです。

于 2012-05-10T20:41:36.077 に答える