Video Screencast Help

Hitting 'Enter' in Workflow

Created: 09 Jul 2009 • Updated: 21 May 2010 | 8 comments
Steve Wayment's picture
This issue has been solved. See solution.

I'm trying to have a user enter a search string in a text box, then click the "Search" button OR just hit Enter.  I'm pretty sure I've done this before, but for the life of me I can't remember how to map the 'Enter' key from the text box to the "Search" button.  I don't remember if it was a component, a behavior, or something else.  Can anyone help?

-Steve

Discussion Filed Under:

Comments 8 CommentsJump to latest comment

EMercado's picture

I believe you have to set the Tab Index to 0 or 1 on the Search button in your Form. That way when the page loads it will be the first thing the page has selected.

Steve Wayment's picture

Yeah, but then the user will click in the search box to type, and the button will lose the focus.  The Tab Index makes it easy for the user to type, hit tab, THEN hit enter, but I want to just be able to hit enter from within the text box.

reecardo's picture

You might be able to write a custom javascript keypress event for the form that checks for return/enter being pressed and simulates the button click. In javascript, I believe the event.keycode is 10 or 13... can't remember off the top of my head.

Steve Wayment's picture

Ok, I'm not sure what's going on, but I created a new form and the Enter key functions as expected.  But no matter what I do, I can't make the first form work.  I have removed and replaced the text boxes and buttons, but I get the same result.  I will recreate the whole form next, but if anyone has any theories I'd be glad to hear them.

claus66's picture

Here's what I do:
Give the button a name by Edit Component -> Tab: Functionality -> Check Specify Control Id -> Type Name eg. 'btnEnter'
In the textbox component Edit Component -> Tab: Functionality -> Custom Events:
Click Add -> AttributesKeyValuePair
Event: onKeyPress
Event Handler: if (event.keyCode == 13){ event.returnValue=false;event.cancel = true;btnEnter.click();}

Hope it helps

SOLUTION
PeeGee's picture

Claus66: Thanks for this code!

Do you have any reference of which language is used in there and how to get more out of that "coding" possibilities? I just can't find any documentation about the language or syntax which can be used.

Steve Wayment's picture

Thanks claus66 and reecardo!  That works great for forms with multiple outputs (like a user lookup w/ search box).  I have done similar things with 'onDblClick' (such as on grid displays) but I couldn't figure out the format for 'onKeyPress'.  The code you provided works perfectly.

DannyTW's picture

 Steve,

I've had the same problem you describe. I could not get a button on a form to press when I hit "Enter" from the field I was filling out. From inside the form, you have to go into the "Browser" tab (by default, it's on the lower left of the Designer window) and make sure that the button you want to have activated when Enter is pressed is higher up on the list than any other button.

However, I've found that the JavaScript already shown in this topic is the most effective way to make sure your button gets pressed.

On a side note, I have a form that will not activate a specified button even when I have used the JScript above... My button and the field that is supposed to activate it are both in a panel. As soon as I added them to the panel,  could not longer press "Enter" to activate the button.