title: Calling listener in bean when pressing enter in JSF 2 h:inputText
body: <p>I am currently writing my first JSF 2 page and I would like to implement the following:
  When the user writes something in a h:inputText element and presses the enter button another h:inputText should get updated with some data out of a database.</p>
  
  <p>My testpage contains the following code:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"      
        xmlns:h="http://java.sun.com/jsf/html"&gt;
  
      &lt;h:body&gt;
          &lt;h3&gt;JSF 2.0 Example&lt;/h3&gt;
  
          &lt;h:form&gt;
  
             &lt;h:inputText id="inputField" value="#{helloBean.name}"&gt;
                &lt;f:ajax render="output" execute="inputField" event="keypress" listener="#{bean.myChangeListener}" /&gt; 
             &lt;/h:inputText&gt;
             &lt;h2&gt;&lt;h:outputText id="output" value="#{helloBean.name}" /&gt;&lt;/h2&gt;  
  
          &lt;/h:form&gt;
      &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The Bean contains all neccessary getters and setters and this function:</p>
  
  <pre><code>public void myChangeEvent( AjaxBehaviorEvent event) {
  
          System.out.println( "VALUE CHANGED" );
  
  }
  </code></pre>
  
  <p>UPDATE 2013-12-16:</p>
  
  <p>After hours of troubleshooting I found the problem why nothing was submitted when leaving the textfield or pressing enter in the textfield. My web application was created with templates and in the template for my page header was an 'a4j:status'  tag and this was in conflict with JSF 2. After removing the 'a4j:status'-line the myChangeEvent method gets called when I click somewhere else on the web page after editing the textfield value.</p>
  
  <p>But there is stil the problem, that the whole page gets submitted when clicking on enter after changing the textfield value. This is because I have a button at the bottom of the page thats saves the user input and therefore submits the whole page, which is OK. But this button should not be called when pressing enter in the textfield. What do I have to add to my existing code?</p>
  
  <p><strong>UPDATE 2013-12-17:</strong>
  After some trouble with JS I finally got it working with the help of L-Ray (thanks again).
  Here I will show the final and working version with JQuery:</p>
  
  <pre><code>&lt;h:inputText id="inputField" value="#{helloBean.name}" &gt;
      &lt;f:ajax render="output" execute="inputField" event="change"  listener="#{helloBean.myChangeEvent}" /&gt;
  &lt;/h:inputText&gt;
  &lt;h2&gt;&lt;h:outputText id="output" value="#{helloBean.name}" /&gt;&lt;/h2&gt;  
  
  &lt;script type="text/javascript"&gt;
      $(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;
              }
          });
      });
  &lt;/script&gt;
  </code></pre>