Primefaces ajax 事件模糊阻止表单提交答案

【问题标题】：Primeface's ajax event blur prevents form submitPrimefaces ajax 事件模糊阻止表单提交
【发布时间】：2021-04-20 11:50:43
【问题描述】：

我有一个 JSF 页面，其中包含一些 Primefaces 组件，包括输入文本和提交按钮。在<p:inputText> 中有<p:ajax event="blur" update="@this" />。

当我将插入符号（文本光标）留在输入文本之外时，提交工作正常，否则，如果我将插入符号留在输入文本中，则不会发生提交，但再次单击表单提交的该按钮很好。

使用 Chrome 调试 ajax 调用我可以看到发送的内容：

我认为这只是模糊事件并且不会发生提交。有什么帮助吗？谢谢

【问题讨论】：

标签： javascript jsf primefaces

【解决方案1】：

我尝试使用 PrimeFaces 10 和 Chrome 89 重现此问题，但无法重现。因此，升级您的 PrimeFaces 版本（如果您尚未使用 10）可能会有所帮助。如果这对您没有帮助，可能值得在PrimeFaces GitHub repo 报告该问题。如果您这样做，请创建一个复制器并包含版本号。

您可以尝试通过以下方式解决此问题：

使用async="true"，这样您的Ajax 请求就不会排队。你可以在p:ajax 和p:commandButton 上试试这个。
在p:ajax 上设置轻微延迟，例如delay="50"（值以毫秒为单位）。

对于它的价值，这对我有用：

<h:form id="frmTest">
    <h:panelGroup id="header">
        <h1>#{testView.string}</h1>
    </h:panelGroup>

    <p:inputText value="#{testView.string}"
                 maxlength="#{testView.string.length()}">
        <p:ajax event="blur"
                update="@this" />
    </p:inputText>

    <p:commandButton value="Submit"
                     update="header"/>
</h:form>

更改输入，将焦点留在输入中并单击提交按钮会导致两个请求。第一个更新输入，第二个更新标题。

【讨论】：