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

发布时间：2020-12-16 02:54:51 所属栏目：百科来源：网络整理

导读：我目前正在编写我的第一个JSF 2页面,我想实现以下内容：当用户在h：inputText元素中写入内容并按下回车按钮时,另一个h：inputText应该使用数据库中的某些数据进行更新. 我的testpage包含以下代码： ?xml version="1.0" encoding="UTF-8"?!DOCTYPE html PUBL

我目前正在编写我的第一个JSF 2页面,我想实现以下内容：
当用户在h：inputText元素中写入内容并按下回车按钮时,另一个h：inputText应该使用数据库中的某些数据进行更新.

我的testpage包含以下代码：

<?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>

解决方法

我建议不要在inputText中使用listener =“#{bean.myChangeEvent}”属性(它需要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树.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!