Primefaces：输入文本/覆盖面板/保持焦点

Question

我们有一个 p:inputText 元素，它应该显示各种选项的覆盖面板。（它是全局搜索，因此您可以勾选要搜索的类别）

用户通常在文本框中单击，开始输入，然后再次查看屏幕

问题是：一旦显示覆盖面板，文本框就会失去焦点。

<p:inputText id="searchItem"></p:inputText>
<p:overlayPanel id="gsOverlay" for="searchItem" my="left top" 
 at="left bottom" dynamic="true" 
 onShow="resizeGSOverlay();">

所以我试图解决这个问题，方法是立即使用

重新关注 "search" inputtext

<p:overlayPanel id="gsOverlay" for="searchItem" my="left top" 
 at="left bottom" dynamic="true" 
 onShow="PrimeFaces.focus('globalSearchForm:searchItem'); resizeGSOverlay();">

但是，有一瞬间，输入字段失去焦点，导致搜索缺少第一个字符。

我可以在不让输入文本失去焦点的情况下显示叠加面板吗？（overlay panel里面的每个组件点击后都会回焦，已经够快了，只是初始回焦慢了点）

Answer 1

刚找到"holy grail"：

overlayPanel 的默认值为：

    PrimeFaces.widget.OverlayPanel.prototype.applyFocus = function(){
        this.jq.find(':not(:submit):not(:button):input:visible:enabled:first').focus();
    }

所以，我只是在包含 primefaces 资源之后添加了以下 javascript，这将覆盖默认实现：

<script type="text/javascript">
    PrimeFaces.widget.OverlayPanel.prototype.applyFocus = function() {
       if (this.id == "globalSearchForm:gsOverlay")
          return;
       else
          this.jq.find(':not(:submit):not(:button):input:visible:enabled:first').focus();
    }
</script>

因此 - 相关覆盖面板中的任何元素一旦可见就不会获得焦点。很有魅力。

更新：使用代理模式（http://api.jquery.com/Types/#Proxy_Pattern）似乎是一个更可靠的解决方案，因为它避免了复制原始实现内容的需要，这在下一个 Primefaces 版本中可能会有所不同：

<script type="text/javascript">
    (function() {
        var proxied = PrimeFaces.widget.OverlayPanel.prototype.applyFocus;

        PrimeFaces.widget.OverlayPanel.prototype.applyFocus = function(){
            if (this.id == "globalSearchForm:gsOverlay")
                return;

            return proxied.apply(this, arguments); 
        };
    })();
</script>

Primefaces：输入文本/覆盖面板/保持焦点

Primefaces: Input Text / Overlay panel / Retain focus

jsf

focus

primefaces