h:inputText 从 javascript 更改其值时不会触发 ajax 更改事件答案

【问题标题】：h:inputText does not fire ajax change event when changing its value from javascripth:inputText 从 javascript 更改其值时不会触发 ajax 更改事件
【发布时间】：2016-08-23 10:16:17
【问题描述】：

我有一个输入文本字段，当 keyup 事件被触发时，它会在 javascript 函数中更改其值，并且应该为 change 事件触发一个 f:ajax：

<h:inputText ... onkeyup="functionThantChangesTextValue(this);">
    <f:ajax event="change" listener="#{someExpensiveCall()}".../>
</h:inputText>

问题是，如果我以编程方式更改 javascript functionThantChangesTextValue 中 inputText 的值，则 ajax 不会为 change 事件触发

我试过这个：

function functionThantChangesTextValue(field) {
    ...
    field.value = finalValue;
    field.onchange();
}

在这种情况下，ajax 事件触发良好，但我真的不希望在更改值后立即发生这种情况。我真正想要的是在更改值和失去焦点时执行 ajax。

【问题讨论】：

“失去焦点时” blur 事件合适吗？
是的，我使用blur 结合focus 事件来使其工作，请参阅答案。问题是，如果您使用 javascript 以编程方式更改输入字段的值，change 事件将不会触发

标签： javascript ajax jsf

【解决方案1】：

最终我设法使用blur 和focus 事件找到了某种解决方案。在focus 事件中，我使用storeOldValue 函数存储旧的inputTextValue 值，然后仅当当前输入文本值与旧文本值不同时，我才在blur 事件上执行someExpensiveCall。通过这种方式，我尝试模拟一个change 事件..

<h:inputText ... onkeyup="functionThantChangesTextValue(this);">
    <f:ajax event="focus" listener="#{storeOldValue()}"/>
    <f:ajax event="blur" listener="#{someExpensiveCall()}".../>
</h:inputText>

【讨论】：