Search code examples
orbeonxforms

Catch arrow up/down in xform


How do I catch when the user presses Arrow Down or Up in Orbeon XForms?

The event 'up' and 'down' are not caught, they are not modifiers, and I cannot think of what text to catch. Example call so far

 <xforms:action ev:event="keypress" ev:observer="#document" xxforms:modifiers="down">
      ...
 </xforms:action>

Solution

  • It looks like it's not possible to do it using this orbeon's keypress event. Also in javascript, the arrow keys in some browsers are only triggered by onkeydown and not by onkeypress.

    You could do it by placing the following code into your xf:model or xforms:model (NOTE: if your model is like xforms:model, it means you use a version with different namespaces, like it used to be in previous orbeon versions, so change xf: to xforms: and xxf: to xxforms:):

                <xf:action ev:event="xforms-ready">
                        <xxf:script>function myKeydown(event) {
    
                        var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
    
                        switch (key) {
                            case 38:
        ORBEON.xforms.Document.dispatchEvent({targetId: 'fr-form-model', eventName: 'up'});
                            YAHOO.util.Event.preventDefault(event);
                                break;
                            case 40:
        ORBEON.xforms.Document.dispatchEvent({targetId: 'fr-form-model', eventName: 'down'});
                            YAHOO.util.Event.preventDefault(event);
                                break;
    
                        }
    
                    }
    
                    YAHOO.util.Event.addListener(document, "keydown", myKeydown);
    </xxf:script>
                    </xf:action>
    
                <xf:action ev:event="up">
                   <!-- Call something from here -->
                <xf:action ev:event="down">
                    <!-- Call something from here -->
                    </xf:action>
    

    If you want to dispatch another event, call it the following way:

    ORBEON.xforms.Document.dispatchEvent({targetId: 'yourTargetId', eventName: 'yourEvent'});
    

    or

    ORBEON.xforms.Document.dispatchEvent("yourTargetId", "yourEvent");
    

    NOTE: Depending on the Orbeon version you are using, it might be necessary to add the following as xf:model attribute: xxf:external-events="up down"

    See: http://wiki.orbeon.com/forms/doc/developer-guide/xforms-javascript-integration#TOC-Dispatching-Events