更新后焦点丢失答案

【问题标题】：Focus lost after update更新后焦点丢失
【发布时间】：2013-04-16 08:33:10
【问题描述】：

我有两个输入的表单，其中一个值取决于另一个值。当用户更改一个字段时，我需要重新计算值（这在 setter 方法中完成）并更新表单。

这是我的例子：

<h:form>
<p:inputText id="price1" value="#{bean.price1}"}">
    <p:ajax event="blur" update="@this, price2"/>
</p:inputText>
<p:inputText id="price2" value="#{bean.price2}">
    <p:ajax event="blur" update="@this, price1"/>
</p:inputText>
</h:form>

问题是更新焦点丢失后，例如如果用户使用 Tab 键从 price1 移动到 price2。

【问题讨论】：

标签： javascript jsf jquery primefaces

【解决方案1】：

你可以试试这个：

<h:form id="fm">
    <script type="text/javascript">
        function test(){
            $(PrimeFaces.escapeClientId('fm:price2')).focus();
        }
    </script>
    <p:inputText id="price1" value="#{bean.price1}" >
        <p:ajax event="blur" oncomplete="test();" update="@this, price2"                listener="#{bean.hand}"/>
    </p:inputText>
    <p:inputText widgetVar="xxx" id="price2" value="#{bean.price2}">
        <p:ajax event="blur" update="@this, price1"/>
    </p:inputText>
</h:form>

【讨论】：

【解决方案2】：

$("#price2").focusout(function(){
    $("#price1").focus();
});

【讨论】：

【解决方案3】：

为您的输入设置 widgetVar
对于 p:ajax，设置 oncomplete="PF('YOUR_WIDGET_VAR_NAME').jq.focus();"

【讨论】：

【解决方案4】：

这是一个非常烦人的问题，它与 JSF 执行部分渲染的方式有关。它替换了重新渲染的整个元素，导致焦点丢失。

解决这个问题的唯一方法是存储焦点保持元素的 tabIndex 并在 DOM 更新后再次设置焦点。

您可以在这篇博文JSF 2 AJAX focus issues 中找到有关该解决方案的更多详细信息。

【讨论】：

如果您在答案本身中创建了非常好的摘要，则可以在答案中引用外部帖子。如果这不可能，请说明（例如，如果摘要会变得非常复杂）。

【解决方案5】：

这篇有用的帖子展示了如何在你的 backing bean 中设置焦点；授予它打破了 bean/ui 之间的分离，但它确实允许您在需要时将一些逻辑添加到要设置焦点的位置：

http://jsfcorner.blogspot.com/2015/06/focus-html-element-after-ajax-call-with.html

tldr： RequestContext.getCurrentInstance().execute("PrimeFaces.focus('frm:additionalInfo');");

【讨论】：