Can h:inputText invoke a method inside managed bean when I press the return/enter key

Question

So I have an inputText that has its value hook to myBean.text, I want that if I click enter/return key, the inputText will invoke a method inside myBean to do something. Can any one help me?

Answer 1

As per your question history, I know that you're using JSF 2.0, so here's a JSF 2.0 targeted answer: use <f:ajax> which listens on a change event and use keypress event to invoke it when the enter key is pressed (keycode 13).

<h:inputText value="#{bean.text1}" 
    onkeypress="if (event.keyCode == 13) { onchange(); return false; }">
    <f:ajax event="change" listener="#{bean.listener}" />
</h:inputText>

The #{bean.listener} should point to a method like

public void listener(AjaxBehaviorEvent event) {
    // ...
}

Answer 2

Actually you can use the following syntax:

<h:inputText value="#{bean.text1}" 
     onkeypress="return (event.keyCode == 13)">
  <f:ajax event="keypress" listener="#{bean.listener}" />
</h:inputText>

JSF creates an event chain and whatever you state under "onkeypress" will be evaluated BEFORE your f:ajax event. Thus you can return false to break the event chain. If you use the change event on f:ajax it'll of course fire on other change events which you probably don't want.

Answer 3

The easiest way is to put the inputText in a form and hide a commandButton next to it.

For example:

<h:form>
  <h:inputText styleClass="myText" value="#{myBean.text}"/>
  <h:commandButton styleClass="myButton" action="#{myBean.myMethod}" style="display:none;" value="submit"/>
</h:form>

---

UPDATE:

If you are using Seam you can use the <s:defaultAction/> tag. This makes that commandButton that contains it the one that responds to the ENTER.

<h:commandButton class="myButton" action="#{myBean.myMethod}" style="display:none;" value="submit">
  <s:defaultAction/>
</h:commandButton>

If you aren't using Seam you could try one of the similar defaultAction controls

Or you could roll your own with a bit of Javascript; ideally jQuery. For example:

$('input.myText').keypress(function(e) {
    if (e.which == 13) {
        $('.myButton').click();
    }
});

Answer 4

you can probably do something like this:

<h:inputText value="123" onkeyup="if(event.keyCode==13)this.blur();" onchange="document.getElementById('fakebutton').click();" valueChangeListener="#{yourbean.dosomething}"/>
<h:commandButton id="fakebutton"actionListener="#{yourbean.fakeaction}"/>

inside your bean:

public void dosomething(ValueChangeEvent event)
{
    System.out.println("I did something");
}
public void fakeaction(ActionEvent event)
{
    System.out.println("I do no nothing");
}

Answer 5

I decided to make this an answer so the code would be clearer than inlined as a comment, but Damo's solution is exactly what worked for me (so upvote his answer not this one ;-). I had a form with a text entry field and a search icon (a magnifying glass). I wanted the ajax query to be submitted by both a click on the magnifying class and pressing enter in the input text field. Clicking the icon in my original solution worked, but for the life of me I couldn't get pressing enter in the text field to submit the ajax call as well (it submitted the form via the normal mechanism instead). Here's the code that finally worked. Thanks again Damo.

<div class="boxWrapper searchWrapper right">
    <div class="boxHeader"><div class="tail" /></div>
    <div class="boxContent">
        <h:form prependId="false">
            <label>SEARCH:</label>
            <div class="searchBox">
                <f:ajax execute="@form" render="@none">
                    <h:inputText id="keywords" value="#{search.searchString}" onblur="inputTextBlur( this, '#{search.searchString}' );" onfocus="inputTextFocus( this, '#{search.searchString}' );" />
                    <h:commandButton action="#{search.search}" style="display:none;" value="submit" />
                    <h:commandLink id="cmdLink" action="#{search.search}">
                        <!-- the span here is to apply .searchWrapper span { } specific css to the image position -->
                        <span><h:graphicImage styleClass="iconSearch" url="images/iconMask.png" width="17" height="17" /></span>
                    </h:commandLink>
                </f:ajax>
            </div>
        </h:form>
    </div>
    <div class="boxFooter"><div class="tail" />
</div>

p.s. - @BalusC: This is the rare case where your answer wasn't a 100% fit with what I was looking for but I've lost count of how many of your others have been. So thank you to you as well, and enjoy the book I sent you from your wishlist. If you'd ever like to do some consulting please check my profile and send me an email.

Regards,

par

Answer 6

I had the same problem and since I don't have enough reputation jet, I post this as an answer.

In my case there are multiple inputs which need to be submitted with f:ajax separately. I needed to improve the solution of BalusC a bit.

You need to add this. in front of onchange().

<h:inputText value="#{bean.text1}" 
    onkeypress="if (event.keyCode == 13) { this.onchange(); return false; }">
    <f:ajax event="change" listener="#{bean.listener}" />
</h:inputText>