OmniFaces 高亮不使用 <p:ajax> 设置焦点答案

【问题标题】：OmniFaces highlight does not set focus with <p:ajax>OmniFaces 高亮不使用 <p:ajax> 设置焦点
【发布时间】：2015-06-29 17:55:07
【问题描述】：

我得到了一个简单的登录表单。我正在使用<p:ajax> 调用<p:blockUI>（请参阅this 问题）。

<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> 配合使用。

显然，它不适用于<p:ajax>。

我怎样才能做到这一点？

【问题讨论】：

标签： jsf-2 primefaces omnifaces

【解决方案1】：

这是由于<p:ajax> 试图在通过doEval() 执行oncomplete 脚本之后重新聚焦活动元素（如handleReFocus() function in core.ajax.js script 所示。但是，当您通过以下方式提交表单时在输入中单击命令按钮而不是按 Enter，然后该活动元素将成为命令按钮本身，而不是输入文本。您可以通过使用 Enter 来确认提交表单的键。您会看到焦点已正确完成。

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

通过<p:focus> 使用 PrimeFaces 自己的自动对焦功能，该功能位于以下表单内：
```
<h:form id="anmeldung">
    <p:focus context="anmeldung" />
    ...
</h:form>
```
它还会自动考虑无效的输入字段。
在 JavaScript 中将PrimeFaces.customFocus 设置为true，这样handleReFocus() 函数就无法发挥作用。
```
<script>PrimeFaces.customFocus = true;</script>
```

【讨论】：

它运行良好。我还使用onfocus="this.value=this.value"，将光标移到正确的位置。