Question

我目前正在编写我的第一个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时整个页面都会被提交。这是因为我在页面底部有一个按钮，用于保存用户输入，因此提交整个页面，这是正常的。但是在文本字段中按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>

Answer 1

我建议不要使用listener="#{bean.myChangeEvent}"中的inputText属性（它需要ValueChangeEvent），而是来自f:ajax的监听器调用，它要求没有参数或AjaxBehaviorEvent。

另外，我建议不要在f:ajax内听一个keypressed-event，而是一个更改事件，以及一个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或seamingly也是一个javascript方法（请参阅W3C school），防止其他事件被称为冒泡DOM树。

在JSF 2中按Enter键时调用bean中的监听器：inputText

1 个答案: