JSF (PrimeFaces) 单选按钮在空格键用于激活时的行为

我正在使用PrimeFaces 5.2来渲染性别的单选按钮组。这适用于内部网络，因此只能在兼容模式下的 IE11 浏览器上运行。当我通过按空格键选择其中一个单选按钮时，按钮已正确激活，但我不知道焦点去了哪里。如果我按 TAB，我会得到我为其设置 tabindex 的第一项，但如果我按 SHIFT-TAB 焦点不会转到我设置 tabindex 的上一个元素，而是转到我没有设置 tabindex 的按钮，也不是默认 Tab 顺序中的第一个或最后一个元素（它不是添加到页面的第一个或最后一个元素）。

包含性别单选按钮之前的元素，日历按钮是使用 SHIFT-TAB 选择的元素 JSF（删除了敏感信息）如下所示：

<tr>
   <td>
      <h:outputText value="#{enr['birth.date']}"/>*:
   </td>
   <td>
      <p:calendar id="birthDate" value="#{II.birthdate}" mode="popup" showOn="button" popupIconOnly="true" pattern="yyyy-MM-dd" mask="9999-99-99" maxdate="#{UserBean.currentDate}" yearrange="c-120" navigator="true" showButtonPanel="true" required="true" requiredMessage="#{enr['missing.required.field']}: #{enr['birth.date']}" tabindex="4"/>
      <p:tooltip for="birthDate" value="yyyy-MM-dd" showEffect="fade" hideEffect="fade" />
   </td>
</tr>
<tr>
   <td>
      <h:outputText value="#{enr['other.last.names']}"/> / <h:outputText value="#{enr['maiden.name']}"/>
   </td>
   <td>
      <p:commandButton icon="ui-icon-plus" title="Icon Only" tabindex="5" immediate="true">
         <f:ajax listener="#{II.addOtherName()}" immediate="true" render="otherNameFields"/>
      </p:commandButton>
      <h:dataTable id="otherNameFields" value="#{II.otherNames}" var="otherNameField">
         <h:column size="30" maxlength="50">
            <h:inputText value="#{otherNameField.otherName}" tabindex="6">
               <f:ajax event="change" listener="#{II.populateName()}" immediate="true" render="otherNameFields" />
            </h:inputText>
         </h:column>
         <h:column>
            <p:commandButton icon="ui-icon-trash" title="Icon Only" immediate="true" tabindex="6">
               <f:ajax listener="#{II.deleteOtherName(otherNameField)}" immediate="true" render="otherNameFields" />
            </p:commandButton>
         </h:column>
      </h:dataTable>
   </td>
</tr>
<tr>
   <td>
      <h:outputText value="#{enr['gender']}"/>*:
   </td>
   <td>
      <p:selectOneRadio value="#{II.gender}" tabindex="7" required="true" requiredMessage="#{enr['missing.required.field']}: #{enr['gender']}" style="border-style: none !important;">
         <f:selectItem itemValue="2" itemLabel="#{enr['male']}"/>
     <f:selectItem itemValue="1" itemLabel="#{enr['female']}"/>
      </p:selectOneRadio>
   </td>
</tr>

我还做了一个普通的非 JSF 版本进行比较，它按预期工作，所以我确定问题出在 JSF 中。

下面的纯网页：

<html>
    <body>
        <p>Non Index:<input type="text" /></p>
        <p>Index #200:<input tabindex="200" type="text" /></p>
        <p><input name="gender" tabindex="201" id="gender_male" type="radio" value="2" />Male</p>
        <p><input name="gender" tabindex="201" id="gender_female" type="radio" value="1" />Female</p>
        <p>Index #202:<input tabindex="202" type="text" /></p>
    </body>
</html>

我

这可以

通过使用selectOneRadio的普通JSF版本来修复，即：

<h:selectOneRadio value="#{II.gender}" tabindex="7" required="true" requiredMessage="#{enr['missing.required.field']}: #{enr['gender']}" style="border-style: none !important;">
     <f:selectItem itemValue="2" itemLabel="#{enr['male']}"/>
     <f:selectItem itemValue="1" itemLabel="#{enr['female']}"/>
</h:selectOneRadio>

哪里：

xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"

相关内容

最新更新

热门标签：