Suppose that we have UI input components that, when the Enter key is pressed, will virtually press a button within a page or page fragment.
Let's assume a page fragment containing an input text component and a command button to press:
The command button is bound to a managed bean action method. By default, the action method is invoked when users press the command button. However, with the JavaScript shown next, this can be simulated and mapped to the Enter key press in the text field.
Let's assume a page fragment containing an input text component and a command button to press:
<af:panelFormLayout id="pfl1">
<f:facet name="footer">
<af:commandButton text="save" id="cb1" action="#{testBean.buttonAction}"
clientComponent="true"/>
</f:facet>
<af:inputText label="Label 1" id="it1" value="#{testBean.param1}" autoSubmit="true">
<af:clientListener method="executeButtonMethod" type="keyUp"/>
</af:inputText>
</af:panelFormLayout>
The command button is bound to a managed bean action method. By default, the action method is invoked when users press the command button. However, with the JavaScript shown next, this can be simulated and mapped to the Enter key press in the text field.
For JavaScript to work, note the use of the af:clientListener on the input text field and the use of the clientComponent="true" configuration on the button.<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:af=http://xmlns.oracle.com/adf/faces/rich
xmlns:f="http://java.sun.com/jsf/core">
<af:resource type="javaScript">
function executeButtonMethod (event){
if (event.getKeyCode() == AdfKeyStroke.ENTER_KEY) {
var inputTextField = event.getSource();
var button = inputTextField.findComponent('cb1');
var partialSubmit = true;
AdfActionEvent.queue(button, partialSubmit); event.cancel();
}
}
</af:resource>