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

Posted 2023-02-23

【中文标题】选项卡索引不起作用richfaces 弹出面板

【英文标题】：Tab Index is not working richfaces pop up panelk

【发布时间】：2011-10-28 03:59:36

【问题描述】：

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

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

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

谁能帮我解决这个问题？

提前致谢。

【参考方案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"  
                 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 = "";
    
;