我目前正在编写我的第一个 JSF 2 页面，我想实现以下内容:
当用户在 h:inputText 元素中写入内容并按下回车按钮时，另一个 h:inputText 应该使用数据库中的一些数据进行更新。
我的测试页包含以下代码:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:body>
<h3>JSF 2.0 Example</h3>
<h:form>
<h:inputText id="inputField" value="#{helloBean.name}">
<f:ajax render="output" execute="inputField" event="keypress" listener="#{bean.myChangeListener}" />
</h:inputText>
<h2><h:outputText id="output" value="#{helloBean.name}" /></h2>
</h:form>
</h:body>
</html>
Bean 包含所有必要的 getter 和 setter 以及此函数:
public void myChangeEvent( AjaxBehaviorEvent event) {
System.out.println( "VALUE CHANGED" );
}
更新 2013-12-16:
经过数小时的故障排除后，我发现了为什么在离开文本字段或在文本字段中按 Enter 时没有提交任何内容的问题。我的 Web 应用程序是使用模板创建的，在我的页眉模板中是一个“a4j:status”标记，这与 JSF 2 冲突。删除“a4j:status”行后，当我单击时调用 myChangeEvent 方法编辑文本字段值后网页上的其他位置。
但是仍然存在问题，即在更改文本字段值后单击 Enter 时，整个页面都会被提交。这是因为我在页面底部有一个按钮，用于保存用户输入并因此提交整个页面，这没问题。但是在文本字段中按回车键时不应调用此按钮。我必须在现有代码中添加什么？
更新 2013-12-17:
在 JS 遇到一些麻烦之后，我终于在 L-Ray 的帮助下让它工作了(再次感谢)。
在这里，我将展示 JQuery 的最终和工作版本:
<h:inputText id="inputField" value="#{helloBean.name}" >
<f:ajax render="output" execute="inputField" event="change" listener="#{helloBean.myChangeEvent}" />
</h:inputText>
<h2><h:outputText id="output" value="#{helloBean.name}" /></h2>
<script type="text/javascript">
$(document).ready(function() {
$( "#mainForm\\:inputField" ).bind('keypress', function(e) {
var keyCcode = e.keyCode || e.which;
// Enter was pressed
if(keyCcode == 13) {
e.target.blur();
e.stopPropagation();
return false;
} else {
return true;
}
});
});
</script>
最佳答案
我建议不要使用 listener="#{bean.myChangeEvent}" inputText 中的属性(它需要 ValueChangeEvent )，但是来自 f:ajax 的监听器调用，它需要没有参数或 AjaxBehaviorEvent .
此外，我建议不要在 f:ajax 中收听按键事件。但是对于更改事件，以及 javascript - keypress - 事件。
因此，作为解决方案，也许以下代码可能对您有用...
<h:form>
<h:inputText id="inputField" value="#{helloBean.name}"
onkeypress="if (event.keyCode == 13) {event.target.blur();event.stopPropagation();return false;} else {return true;};">
<f:ajax render="output" execute="inputField" event="change"
listener="#{helloBean.myChangeEvent}"/>
</h:inputText>
<h2><h:outputText id="output" value="#{helloBean.name}" /></h2>
</h:form>
托管 bean
public void myChangeEvent( AjaxBehaviorEvent e ) {
System.out.println( "VALUE CHANGED" );
}
event object将由浏览器自己提供给我们的 javascript 部分 - 所以在 on* - 属性之外运行它是行不通的。javascript 方法
event.stopPropagation()是 jQuery method或者无缝地也是一个 javascript 方法(参见 W3C school )，防止其他事件被称为冒泡 DOM 树。
关于ajax - 在 JSF 2 h :inputText 中按 Enter 时在 bean 中调用监听器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20565120/