更新后焦点丢失

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焦点问题的博客文章中找到更多关于解决方案的详细信息。

Answer 5

这篇有用的文章展示了如何在后台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');");