function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
DSLDSL 

Press enter on inputtext to take action?

Hi,

Does anyone know a way to have an inputText field take the action of the commandbutton when the user presses enter?

I have a simple form with one inputtext and one commandbutton. The button just does the action piece. Can I bind an user press on the input text to that action?

Thanks!
JimRaeJimRae
You need to create a javascript function to capture and process the keypress, and place it on the onkeypress event of the inputText field. Be careful though, this method is very sensitive to button location, number of buttons and rerenders.  There are numerous posts on the board about issues related to the wrong element refreshing, etc.

Something like this should still get you started.:

Code:
<apex:inputText id="searchBox" value="{!searchText}" onkeypress="handleKeyPress(event);" >
        </apex:inputtext>
        <apex:outputLabel value="Account Name" for="searchBox"></apex:outputLabel>

   <apex:commandButton action="{!search}" value="Search" id="searchBtn"  status="status" rerender="outdata" >
      </apex:commandButton>   
        <script> var sbutton = document.getElementById("{!$Component.searchBtn}"); </script>

     <script type="text/javascript">
        function handleKeyPress(e){
          var key= 0;
          if(window.event){
            key= e.keyCode;
            }else if(e.which){
           key= e.which;
          }
            if(key==13){
            sbutton.click();
            }
        }
</script>

 

jwetzlerjwetzler
Which browser are you using?  button.click() is kind of inconsistent depending on the browser.

I know there's a bug (maybe it's a "feature") in IE where a form with one inputText and one button will not fire on the enter keystroke, but if you have more than one input in the form, it works.  The way to get around it is to either put an empty input or an inputHidden in your form.  You can hide it by doing style="display:none" if you aren't using a hidden input.

We actually ran into this internally and that workaround fixed it.
RedPointRedPoint

Jill, thanks for the heads up on the "bug".  I'm using Firefox and was having the same problem with a form that had one field and one button.  For me, the inputHidden didn't solve the problem so I had to hide the 2nd inputText field like this and it worked perfectly: 

 

 

<apex:inputText style="display:none" />

 

 

 

cpetersoncpeterson

For the life of me I can't quite figure this one out, document.getElementById never seems to return anything, and from the inspector in Safari4 it looks as though sbutton is never even being initialized to undefined.

 

 VF:

<apex:pageBlock>
<apex:outputPanel rendered="{!showFilters}">
<apex:outputLabel value="Find objects related to this: "/>
<apex:commandButton value="Account" action="{!getAccountInventory}" rerender="assetTable"/>
<apex:commandButton value="Contact" action="{!getContactInventory}" rerender="assetTable"/>
<apex:inputText value="{!searchText}" id="sstext" onKeyPress="handleKeyPress(event);" />
<apex:commandButton id="searchBtn" value="Search" action="{!doSearch}" rerender="assetTable" />
<!-- There's a bug in IE where a single inputField won't process properly, so we have to add a hidden one -->
<apex:inputText style="display:none" />
<script> var sbutton = document.getElementById("{!$Component.searchBtn}"); </script>
<script type="text/javascript">
function handleKeyPress(e){
var key= 0;
if(window.event){
key= e.keyCode;
}else if(e.which){
key= e.which;
}
if(key==13){
sbutton.click();
}
}
</script>
</apex:outputPanel>
</apex:pageBlock>

 

 My javascript is weak, but I don't see any reason why sbutton wouldn't at least be declared assuming the outputPanel is.

 

VinodVinod

Hi,

 

The issue is the way you take the javascript value.

 

If you have a pageblock give it a id="pageblock" and then  use it

 

        var sbutton = document.getElementById("{!$Component.page.form1.pageblock.theButton}");
        //alert(sbutton);

 

where page= my page id

          form1=is the form id

          pageblock= is the page block id

          theButton= is my element

 

and this works fine for me.

 

 

Thanks

Vinod

 

AlikAlik

In jQuery, the code looks like

 

$('input[type="text"]').bind('keypress',function(e) {

             if(e.which==13)

                $('input['type=submit"]')[0].click();         

});

Kirill_YunussovKirill_Yunussov

The code in the posts above did not work for me (maybe it's missing something), but the code in the link below did.  It submits a search string on press of the Enter key.

 

http://developer.force.com/cookbook/recipe/submit-a-form-with-the-enter-key

Jennifer Heroux 10Jennifer Heroux 10

This worked great! Thank you :)