jsf - 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();">

所以我尝试解决这个问题，立即将注意力集中在“搜索”inputtext 上，使用

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

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

我可以在不让输入文本失去焦点的情况下显示覆盖面板吗？ (覆盖面板内的每个组件在单击后都会重新聚焦，这已经足够快了 - 只是最初的聚焦速度慢了)

Answer 1

刚刚找到了“ chalice ”:

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>