demetrio.it blog

Feb

RichFaces editor: how to intercept the “return” key to submit a form

Demetrio Filocamo IT, Tips, programming 2010-02-12

Hello,
I’ll try to write more on my blog and keep you update about every technique I use and that can be very useful to you as well.

Today I needed to submit a form with an editor element when the user pressed the “return” key (instead of creating a new line).

The code is not so complicate but as the rich:editor uses the TinyMCE component you have to search all around to find the right way. Better to have a complete solution.

It consists on creating an handler onKeyPress and call a javascript function (created by a:jsFunction) to submit our form. Simpler doing then saying it.

Let’s start by including the editor in the standard way (form, editor, submit button):

<h:form>
    <rich:editor value="#{editorBean.myValue}" />
    <a:commandButton value="Send" reRender="something"/>
</h:form>

I’ve kept it simple (stripped out all the params and attribute I use) to target only our problem.

Let’s define a javascript function handler for our use case:

<script type="text/javascript">
    function returnSubmit(ed) {
        ed.onKeyPress.add(function(ed, e)
        {
            var keyCode = e.keyCode || e.which || e.charCode;
            if (keyCode == 13)
            {
                // My return key handler code here 
            }
        });
    }
</script>

The ed variable will be passed by the editor; let’s configure our new function to the onsetup editor event:

<h:form>
    <rich:editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a:commandButton value="Send" reRender="something"/>
</h:form>

Now we have a function that is called for each keyPress event, and inside it we can execute something on “return” key press.

What we have to do is to submit the form, the best way is to create an Ajax javascript function using a:jsFunction: in this way we can do standard Ajax updates also reRendering elements, submitting params and all the thing we are used to

Let’s create the function:

<h:form>
    <rich:editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a:commandButton value="Send" reRender="something"/>
    <a:jsFunction name="submitForm" reRender="something"/>
</h:form>

Now we have to insert it into the handler and it’s done!

Here it is the whole code:

<script type="text/javascript">
    function returnSubmit(ed) {
        ed.onKeyPress.add(function(ed, e)
        {
            var keyCode = e.keyCode || e.which || e.charCode;
            if (keyCode == 13)
            {
                // My return key handler code here 
                submitForm();
            }
        });
    }
</script>

<h:form>
    <rich:editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a:commandButton value="Send" reRender="something"/>
    <a:jsFunction name="submitForm" reRender="something"/>
</h:form>

Another tip
If with the js function you reRender components, do some action, set some property etc., to avoid duplication of code in the commandButton you can use the same js function into the button using the onclick attribute:

<h:form>
    <rich:editor 
                value="#{editorBean.myValue}" 
                onsetup="returnSubmit(ed)" />
    <a:commandButton value="Send" onclick="submitForm();"/>
    <a:jsFunction name="submitForm"
                  action="#{myBean.myAction}"
                  oncomplete="doSomething();"
                  reRender="first,second">
        <f:setPropertyActionListener value="valueToSet" target="#{myBean.firstValue}"/>
    </a:jsFunction>
</h:form>