在 RichFaces 4.1.0 中将焦点设置在弹出面板和动态呈现的字段上答案

【问题标题】：Set focus on popup panel and dynamically rendered fields in RichFaces 4.1.0在 RichFaces 4.1.0 中将焦点设置在弹出面板和动态呈现的字段上
【发布时间】：2014-01-06 12:49:16
【问题描述】：

我有一个 JSF 页面，其中某些字段在调用其他字段的“onchange”事件时动态呈现。还有一个弹出面板，单击按钮即可打开。这是页面的简化版本：

<h:form id="testForm">
        <h:panelGrid id="testPanel" columns="2">
            <h:inputText id="text0" />
            <h:inputText id="text1">
                <f:ajax event="change" listener="#{popupMBean.renderDynamicData}"
                    render="@form" />
            </h:inputText>
            <h:inputText id="text2" rendered="#{popupMBean.renderDynamic}" />
            <h:inputText id="text3" />
            <a4j:commandButton id="open" value="Open" render="testPopup"
                oncomplete="#{rich:component('testPopup')}.show();" />
        </h:panelGrid>
    </h:form>

    <rich:popupPanel id="testPopup" height="100"
        domElementAttachment="form" header="Test">
        <f:facet name="controls">
            <h:commandButton value="Close"
                onclick="#{rich:component('testPopup')}.hide()"></h:commandButton>
        </f:facet>
        <a4j:outputPanel id="test">
            <a4j:commandButton id="first" value="First" />
            <a4j:commandButton id="second" value="Second" />
        </a4j:outputPanel>
    </rich:popupPanel>

我有一个要求，我需要使用键盘遍历所有字段。以下是面临的问题：

当我单击“打开”按钮时，它会显示弹出面板，但焦点未设置到弹出窗口中的第一个输入元素。
当用户关闭弹出窗口时，焦点应设置为生成弹出窗口的字段或旁边的字段。
在字段“text1”上的更改事件被调用后，焦点转移回页面上的第一个输入元素，即“text0”，而不是新呈现的字段“text2”。

谢谢。

【问题讨论】：

标签： richfaces

【解决方案1】：

通过各种论坛，我发现这个问题与Rich Faces 4.1（RF-10758）中的错误有关。

Jboss 社区在 RichFaces 4.2.3 版本中通过更改 popupPanel.js 文件解决了这个错误。在 popupPanel.js 中有一个 processAllFocusElements 函数，用于比较“root”（父窗口）和“this.div”（子窗口）。虽然“root”是一个简单的 DOM 元素，但“this.div”是一个 jQuery 元素集合，因此两者之间的比较总是失败。因此，应该写成 (root != this.div.get(0) ) 而不是 (root != this.div)。

但我现在无法迁移到 RichFaces 4.2。所以我决定用下面的代码覆盖默认函数processAllFocusElements：

jQuery.extend(RichFaces.ui.PopupPanel.prototype, {
        processAllFocusElements: function(root, callback) {
            var idx = -1;
            var tagName;
            var formElements = "|a|input|select|button|textarea|";
            if (root.focus &amp;&amp; root.nodeType == 1 &amp;&amp; (tagName = root.tagName) &amp;&amp;
                // Many not visible elements have focus method, we is had to avoid processing them.
                (idx = formElements.indexOf(tagName.toLowerCase())) != -1 &amp;&amp;
                formElements.charAt(idx - 1) === '|' &amp;&amp;
                formElements.charAt(idx + tagName.length) === '|' &amp;&amp;
                !root.disabled &amp;&amp; root.type != "hidden") {
                callback.call(this, root);
            } else {
                if (root != this.div.get(0)) {
                    var child = root.firstChild;
                    while (child) {
                        if (!child.style || child.style.display != 'none') {
                            this.processAllFocusElements(child, callback);
                        }
                        child = child.nextSibling;
                    }
                }
            }
        }
        }
    )

这已经解决了我在原始问题中的问题（1），但其他问题仍有待处理。

【讨论】：