Question

I have a form which creates a new record in a table. It is a series of
text-edit fields each with a field from the same dataset. When I click
a button an ajax workflow is run that commits the new values to the
database.

Is there a way to make it so that hitting Return/Enter does the same
thing, the way web forms usually work?

The code I’d like to be able to use is like this:

<behaviors xmlns="urn:aviarc:widget:com.aviarc.toronto.widget.core.action">
    <when>
        <events>
            <event event="add_problem_record_button.onClick" />

            <!-- how do I ensure this is the Return key? -->
            <event event="add_problem_record_form.onKeyUp" />
        </events>
        <do>
            <call-ajax-workflow name="add-problem-record" />
        </do>
    </when>
</behaviors>

My main issue is how do I test that it was the Return key that was
pressed?

Answer 1

The text-edit widget provides the onEnterKey event:

<when>
    <events>
        <widget-event name="text-edit-1.onEnterKey"/>
        <widget-event name="submit.onClick"/>
    </events>
    <!-- do stuff -->
</when>

More generally, if you need to find out the keyCode in an event handler, you can access it from the event-parameters dataset:

<when>
    <events>
        <!-- all these events should provide a keyCode parameter -->
        <widget-event name="my-text-edit.onKeyDown"/>
        <widget-event name="my-text-edit.onKeyUp"/>
        <widget-event name="my-text-edit.onKeyPress"/>
    </events>
    <alert message="{$event-parameters.keyCode}"/>
</when>