Ich benutze PrimeFaces 5.2, um eine Optionsfeldgruppe für Geschlecht zu rendern. Dies gilt für ein internes Netzwerk und wird daher nur auf IE11-Browsern im Kompatibilitätsmodus ausgeführt. Wenn ich einen der Radiobuttons durch Drücken von Leertaste wähle, ist der Knopf korrekt aktiviert, aber ich weiß nicht, wohin der Fokus gegangen ist. Wenn ich TAB drücke, kam ich zum ersten Element, für das ich den Tabindex eingestellt habe, aber wenn ich SHIFT-TAB drücke, geht der Fokus nicht zum vorherigen Element, auf das ich den Tabindex gesetzt habe, sondern zu einem Knopf, den ich nicht eingestellt habe on und ist auch nicht das erste oder letzte Element in der Standard-Tab-Reihenfolge (es ist nicht das erste oder letzte Element auf der Seite hinzugefügt).JSF (PrimeFaces) Radiobutton-Verhalten, wenn die Leertaste aktiviert wurde
Das Element vor den Gender Radio-Buttons enthalten ist, ist der Kalender-Taste, was zusammen mit der SHIFT-TAB Die JSF (mit sensiblen Informationen entfernt) ist ausgewählt wird immer wie folgt:
<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>
Ich habe auch ein schlichtes Nicht-JSF-Version für den Vergleich, die wie erwartet funktioniert, so bin ich sicher, dass das Problem in der JSF ist.
Plain HTML unter:
<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>
I
Stellt sich heraus, dass wir verwenden eine Buggy-Implementierung von Websphere - getestet in Tomcat und alles war gut. – BigMac66
_ "Ich habe auch eine einfache Nicht-JSF-Version zum Vergleich, die wie erwartet funktioniert, so bin ich sicher, dass das Problem in der JSF ist." _ Meiner Meinung nach eine falsche Annahme ... Wahrscheinlich ist der Kompatibilitätsmodus von IE das Problem das führt dazu, dass es nicht richtig mit jQuery und PrimeFaces funktioniert. Und 'f: ajax' in einem' p: commandButton' ist seltsam, da es standardmäßig bereits aktiviert ist. Und eine neuere Version von PrimeFaces könnte auch geholfen haben. – Kukeltje