Question

我使用PrimeFaces 5.2渲染性别的单选按钮组。这适用于内部网络，因此只能在兼容模式下在IE11浏览器上运行。当我按空格键选择其中一个单选按钮时，按钮被正确激活，但我不知道焦点在哪里。如果我按TAB，我得到了我设置tabindex的第一个项目，但是如果我按下SHIFT-TAB焦点不会转到我设置tabindex的前一个元素但是转到我没有设置tabindex的按钮on并且也不是默认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：

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

我

Answer 1

这可以通过使用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"

当空格键用于激活时，JSF（PrimeFaces）单选按钮行为

1 个答案: