Question
In ADF Faces, how to submit an input form with the ENTER key ?
Suppose f.ex. the following Login page with 2 input fields: Username and Password, and a button: Login:
Your end users have to enter their username and password and then click the button Login.
However, some would prefer to press the ENTER key as equivalent to clicking Login.
Answer
A lot of developers search for a property in the <af:commandButton> to specify that pressing ENTER should activate the button.As they don't find any they conclude this is not possible to define it in ADF Faces.
This is true you cannot specify it at the <af:commandButton> level (you can only define an access key there), but you can in the <af:form>.tag.
More details below.
af:commandButton
There is no property in the <af:commandButton> tag to specify that pressing the ENTER key is the equivalent of clicking the commandButton.There is a property accessKey (sometimes referred to as the "mnemonic") to specify the character that, when pressed in combination with the ALT key, will activate this commandButton.
<af:commandButton text="Login"In this example, pressing ALT + L will activate the Login button.
id="loginButton"
(...)
accessKey="L" />
The button is rendered with the accessKey underlined as shown the next figure:
NB: you can also use the textAndAccessKey to simultaneously set both the "text" and "accessKey" attributes from a single value, using conventional ampersand (' & ') notation.
af:form
You can specify it in the <af:form> tag. It contains a property defaultCommand where you can specify the id
attribute of the command button whose action would be invoked by
default for form submit on hitting ENTER on any of the input fields of
the form:<af:form (...) defaultCommand="loginButton" >
(...)
</af:form>
By default, JDeveloper creates a JSF standard h:form tag in your JSF pages, but you can easily convert it to an af:form tag by performing the following steps:
- in the Structure window, select h:form
- select the right-click menu Convert
- in the Convert Form dialog, select the category "ADF Faces Core";
select the item to be created: Form and click OK
- select af:form in the Structure window (that's the component we have created);
in the Property Inspector, type the id of the commandButton in the property DefaultCommand, in this example loginButton
References
JDeveloper online help, topicsOracle Application Development Framework Developer's Guide For Forms/4GL Developers
Comments (6)
Hi Didier,
This doesn't work if the active control is an af:selectOneChoice. Do I have to use javascript to click a button in that case or is there another property that I can use?
Thanks,
Dave
Posted by David Gress | December 19, 2008 12:40 PM
Posted on December 19, 2008 12:40
Hi Dave,
that should work independently from the widget the focus is on.
Which version of JDeveloper are you using ?
Regards,
Didier.
Posted by Didier | December 20, 2008 2:33 AM
Posted on December 20, 2008 02:33
I'm using JDev 10.1.3.3.0.
I was thinking that since a dropdown uses the ENTER key as a way to select a value that the defaultCommand was being overrode here.
Thanks,
Dave
Posted by David Gress | December 26, 2008 6:03 AM
Posted on December 26, 2008 06:03
Hi Dave,
is your table in an af:subform ?
Regards,
Didier.
Posted by Didier | January 6, 2009 1:18 AM
Posted on January 6, 2009 01:18
I noticed the same issue with any af: tag that gets rendered as a SELECT html tag. I found the issue in the _submitOnEnter(a0,a1,a2) javascript method in the core.js file.
In the method below on line 17 it only looks at INPUT tags for the enter key. Since it is only looking at INPUT tags all SELECT tags will be ignored. The enter key will not submit the form when the user is in a SELECT tag field. We are using JDeveloper 10.1.3.2.0.
Was the SELECT tag just missed or is there a reason for ignoring SELECT tags?
If I override this js and replace line 17 with "if((a3.tagName=='INPUT' || a3.tagName=='SELECT') &&" the enter key successfully submits the form in select lists.
1function _submitOnEnter(a0,a1,a2)
2{
3 if(window.event!=(void 0))
4 a0=window.event;
5
6 var a3;
7
8 if(a0.srcElement==undefined)
9 a3=a0.target;
10 else
11 a3=a0.srcElement;
12
13 if(!a3)return true;
14
15 if(a3.tagName=='A')return true;
16
17 if((a3.tagName=='INPUT')&&
18 (a3.type!='submit')&&
19 (a3.type!='reset'))
20 {
21 if(_getKC(a0)==13)
22 {
23 if(a2!=(void 0))
24 {
25 var a4=new Object();
26 a4[a2]=a2;
27 a4['source']=a2;
28 submitForm(a1,0,a4);
29 }
30 return false;
31 }
32 }
33
34 return true;
35}
Posted by Deryk | April 1, 2009 10:37 AM
Posted on April 1, 2009 10:37
Was a very useful post. Brief and upto the point
was helpful. Thanks
Posted by Bharath | April 6, 2009 11:11 PM
Posted on April 6, 2009 23:11