OmniFaces高亮显示无法通过< p:ajax>设置焦点 [英] OmniFaces highlight does not set focus with <p:ajax>

问题描述

我有一个简单的登录表格.我正在使用<p:ajax>调用<p:blockUI>(请参阅此问题).

I got a simple login form. I am using <p:ajax> to invoke a <p:blockUI> (see this question).

<h:commandButton id="anmeldung_button"
action="#{benutzerAnmeldung.anmelden}" value="Anmelden"
styleClass="btn btn-info btn-sm">
    <p:ajax process="@form" update="@form"/>
</h:commandButton>
<p:blockUI id="block" block=":anmeldung" trigger="anmeldung_button" />

我正在使用<o:highlight />突出显示无效输入.这很好. 它也可以与<f:ajax>完美配合.

I am using <o:highlight /> to highlight invalid inputs. This works fine. It is working with a <f:ajax> perfectly, too.

显然，它不能与<p:ajax>一起使用.

Apperently, it is not working with <p:ajax>.

我该如何实现?

推荐答案

这是由于<p:ajax>通过doEval()执行oncomplete脚本后尝试重新调整活动元素 引起的(可以在core.ajax.js脚本中使用了nofollow> handleReFocus()函数.但是，当您通过单击命令按钮而不是在输入内部按 Enter 提交表单时，该活动元素将变为命令按钮本身，而不是输入文本.您只需使用 Enter 键提交表单即可确认这一点.您会看到焦点已经正确放置.

This is caused by <p:ajax> trying to refocus the active element after executing the oncomplete scripts via doEval() (as can be seen in handleReFocus() function in core.ajax.js script. However, when you submit the form by clicking the command button instead of pressing Enter while inside the input, then that active element becomes the command button itself, not the input text. You can confirm this by just using Enter key to submit the form. You'll see that the focus is done right.

在您的特殊情况下，有两种方法可以解决此问题:

There are in your particular case 2 ways to workaround this:

1. 通过<p:focus>利用PrimeFaces自己的自动对焦功能，该功能位于以下表单内:

1. Make use of PrimeFaces' own autofocus facility via <p:focus> which is placed inside the form as below:

<h:form id="anmeldung">
    <p:focus context="anmeldung" />
    ...
</h:form>

它还会自动考虑无效的输入字段.

It also automatically takes into account invalidated input fields.

在JavaScript中将PrimeFaces.customFocus设置为true，这样handleReFocus()函数将无法正常工作.

Set PrimeFaces.customFocus to true in JavaScript, so that handleReFocus() function won't do its job.

<script>PrimeFaces.customFocus = true;</script>

这篇关于OmniFaces高亮显示无法通过< p:ajax>设置焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！