PrimeFaces inputText ajax event=valueChange 在命令按钮被点击后触发

Question

使用 JSF 和 PrimeFaces 6.1 我有一个 inputText 字段：

<p:inputText value="#{backingBean.stringField}">
    <p:ajax event="valueChange" update="@form" />
</p:inputText>

在同一个表单中有一个 commandButton:

<p:commandButton id="btnDoThatThing" 
                 ajax="true" 
                 immediate="true"
                 update="@form"
                 process="@this"
                 action="#{backingBean.doThatThing}"/>

当我

更改 inputText 字段，
然后点击命令按钮以外的地方
单击命令按钮

一切都按预期进行。但是如果我：

更改 inputText 字段，
立即命令按钮

由于第一次单击 commandButton 触发了 inputText 字段中发生的 valueChange 事件，因此未触发该按钮。

如果我第二次单击它，按钮操作最终会发生。

现在，如果我将 p:ajax event="valueChange" 更改为 p:ajax event="keyup"，第一次单击 commandButton 时会按预期工作，但不幸的是，inputField 上的 keyup 事件非常糟糕，您会失去该字段中的功能（copy/paste 文本、文本选择、'fast' 键入等）

关于如何在 inputText 字段中启动更改事件，以及当用户在 inputText 字段中键入后立即单击按钮时触发 commandButton 操作有什么想法吗？

感谢您的宝贵时间！

Answer 1

首先你的 valueChange 被触发。这会更新表单包括按钮。不能 100% 确定这是否取决于浏览器，但在 Chromium (Linux) 中，不会执行对先前呈现的按钮（在更新之前）的点击。

当我将更新表达式更改为 selector 时，它可以正常工作。我的表达式更新了我需要更新的元素不包括 按钮。就我而言：

<p:ajax update="@(form :input:not(button))" />

请注意，change 事件是输入的默认事件，因此我删除了 event="valueChange"。

当然你不需要使用选择器。您也可以只更新不包含按钮的组件（如面板）：

<p:ajax update="yourPanel" />

此外，ajax="true" 是 p:commandButton 的默认值，因此您可以删除它。

PrimeFaces inputText ajax event=valueChange 在命令按钮被点击后触发

PrimeFaces inputText ajax event=valueChange fires AFTER commandButton clicked

ajax

jsf

primefaces

jsf-2