选项卡索引不起作用richfaces 弹出面板答案

【问题标题】：Tab Index is not working richfaces pop up panelk选项卡索引不起作用richfaces 弹出面板
【发布时间】：2011-10-28 03:59:36
【问题描述】：

我是 Rich Faces 的新手，我们使用的是 Richfaces 4.0。我们的项目中有一个弹出需求，我们使用了rich:popupPanel。
在弹出窗口中，我们有一个包含 5 到 10 个输入文本框的表单。

我们面临以下问题： 选项卡无法转到下一个文本框。

我们使用了 tabindex 属性，但它不适用于丰富的面孔。

谁能帮我解决这个问题？

提前致谢。

【问题讨论】：

标签： jsf-2 richfaces

【解决方案1】：

这是一个在 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 的表单的其他部分，它将导致 tab 完全中断。

【解决方案2】：

一个通用的解决方法可能是重写负责的函数：

RichFaces.ui.PopupPanel.prototype.processTabindexes = function (input) {
    if (!this.firstOutside) {
        this.firstOutside = input;
    }
    if (!input.prevTabIndex) {
        input.prevTabIndex = input.tabIndex;
//      input.tabIndex = -1; // This line was marked out
    }
    if (!input.prevAccessKey) {
        input.prevAccessKey = input.accessKey;
        input.accessKey = "";
    }
};

【讨论】：