space 栏用于激活时的 JSF (PrimeFaces) 单选按钮行为

Question

我正在使用 PrimeFaces 5.2 呈现性别单选按钮组。这是针对内部网络的，因此仅运行在兼容模式下的 IE11 浏览器上。当我通过按 space select 其中一个单选按钮时，该按钮被正确激活，但我不知道焦点去了哪里。如果我按 TAB，我会到达我设置 tabindex 的第一个项目，但如果我按 SHIFT-TAB，焦点不会转到我设置 tabindex 的前一个元素，而是转到我没有设置 tabindex 的按钮on 并且也不是默认 Tab 键顺序中的第一个或最后一个元素（它不是添加到页面的第一个或最后一个元素）。

包含性别单选按钮之前的元素，日历按钮是用 SHIFT-TAB selected 的 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"

space 栏用于激活时的 JSF (PrimeFaces) 单选按钮行为

JSF (PrimeFaces) radio button behavior when space bar used to activate

jsf

focus