RichFacesの4で有効にタブ機能を備えたサンプルのポップアップパネルです:
<script type="text/javascript">
jQuery('input').live("keypress", function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
/* ENTER PRESSED*/
if (key == 9) { // 9 for TAB
/* FOCUS ELEMENT */
var inputs = jQuery(this).parents("form").eq(0).find(":input");
var idx = inputs.index(this);
var move = (e.shiftKey) ? (-1) : (1); // for Shift+TAB
if (idx == inputs.length - 1) {
inputs[0].select()
} else {
inputs[idx + move].focus(); // handles submit buttons
inputs[idx + move].select();
}
return false;
}
});
</script>
<rich:jQuery query="focus().select()" selector="#thegrid :input:visible:enabled:first" name="focusInput"/>
<rich:popupPanel id="samplepopup" modal="true" resizeable="true" height="220" width="400"
onmaskclick="#{rich:component('samplepopup')}.hide()"
onshow="focusInput();">
<f:facet name="header">
<h:outputText value="sample"/>
</f:facet>
<h:form>
<h:panelGrid id="thegrid" columns="2" style="direction: rtl;">
<h:outputText value="Current Pass"/>
<h:inputSecret id="pass1" value="#{userBean.pass}"/>
<h:outputText value="New Pass"/>
<h:inputSecret id="pass2" value="#{userBean.newPass}"/>
<h:outputText value="New Pass Confirm"/>
<h:inputSecret id="pass3"/>
</h:panelGrid>
</h:form>
</rich:popupPanel>
<a4j:commandButton value="show sample" onclick="#{rich:component('samplepopup')}.show()"/>
を、しかし、男は、それであります醜い。これは、自然なhtml tabindexで自然に動作するフォームの他の部分でタブが完全に壊れる原因になります。 – Eric