更新后焦点丢失

时间:2013-04-16 08:33:11

标签: javascript jsf jquery primefaces

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

5 个答案:

答案 0 :(得分:5)

你可以试试这个:

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

  • 为您的输入设置widgetVar
  • 代表p:ajax,设置oncomplete =“PF('YOUR_WIDGET_VAR_NAME')。jq.focus();”

答案 3 :(得分:0)

这是一个非常烦人的问题,它与JSF预先形成部分渲染的方式有关。它取代了重新渲染的整个元素,导致焦点丢失。

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

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

答案 4 :(得分:0)

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