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

所以我试着解决这个问题，立即重点关注＆＃34;搜索＆＃34; inputtext使用

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

然而，有一瞬间，输入区失去了焦点，导致搜索缺少第一个字符。

我可以显示叠加面板，而不会让输入文字失去焦点吗？（叠加面板内的每个组件在点击后都会向后聚焦，速度足够快 - 只是最初的焦点会慢一些）

Answer 1

刚刚找到了“圣杯”：

overlayPanel的默认值为：

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

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

<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：输入文本/叠加面板/保留焦点

1 个答案: