javascript - 更新后焦点丢失

Question

我有两个输入的表格，其中一个值取决于另一个值。当用户更改一个字段时，我需要重新计算值（这是在 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。

Answer 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>

Answer 2

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

Answer 3

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

Answer 4

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

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

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

Answer 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');");