5 Replies Latest reply on Jan 2, 2013 6:52 AM by Benedict Kennedy

    Arrow Keys to Navigate fields in Rho Elements on HTML page not working

      The old Pocket IE browser on the Symbol Motorola hand helds would allow an HTML page with input fields to be navigated using the arrow keys on the hand held unit.  This does not work in Rho Elements.  Is there a configuration setting, or something else that may be enabled to have the arrow keys move through the input fields.

       

      Using the sample file attached, simply load the page and try to arrow through the fields.

        • Re: Arrow Keys to Navigate fields in Rho Elements on HTML page not working
          Darryn Campbell

          Hi Steven, As I remember the handling of arrow keys on Windows Mobile was different to Windows CE for the IE browser and what you're describing was only the behaviour of the former.  Personally I always thought navigating the form via arrow keys was a bit odd by default but if you want to mimic this behaviour in RhoElements you can use the KeyCapture API to remap the arrow keys to the tab key (http://docs.rhomobile.com/rhoelements/keycapture/).  The arrow keys are 0x37-0x40 and tab is 0x09 on most devices I think.

           

          You could also try capturing the keys in Javascript:

          document.onkeydown=DOMoutputDown;
          document.onkeypress=DOMoutputPress;
          document.onkeyup=DOMoutputUp;
          

          and then manipulating the DOM to set the next or previous field selected based on the currently selected field... I think that would be the best technique.

           

          Regards.

          1 of 1 people found this helpful
            • Re: Arrow Keys to Navigate fields in Rho Elements on HTML page not working

              Thanks, we will give that a try.  Our customer wants the arrow key support, as they are completing data input on the hand held, and it is logic to move from field to field with the arrow key on the keypad, where they are, then touching back up on the screen in the hand held.  For reference, they are using 9190 hand helds to complete web based forms.

                • Re: Arrow Keys to Navigate fields in Rho Elements on HTML page not working
                  Benedict Kennedy

                  I tried to write a JavaScript that would do this by

                  a)     generating a TAB(+shift) key event on the arrow input, this would only work for going forward, not back as shift+tab cannot be generated in RhoElements, and does not work in JS, or

                  b)     selecting the next/previous focusable field but there is no easy way in JavaScript.


                  It would be fairly simple to do this with using jQuery, as long as the only things that you want to move between are known HTML types (i.e. <input>,<button>,<textarea>). Would that be an acceptable technique? Would adding the jQuery into the program be an issue?

                   

                  Regards,

                  Ben

                  1 of 1 people found this helpful
                    • Re: Arrow Keys to Navigate fields in Rho Elements on HTML page not working

                      The only problem is the platform.  I am not sure the 9190 hand held will run jQuery properly.

                       

                      This piece of code will capture any key press except green key and red key.

                      <script type="text/javascript">

                          document.onkeydown=enterToTab;

                          function enterToTab(event)

                          {

                                 k = window.event.keyCode;

                              alert(k);

                          }

                      </script>   

                       

                      In RohElements we could not remap the arrow keys to the Tab key.

                        • Re: Arrow Keys to Navigate fields in Rho Elements on HTML page not working
                          Benedict Kennedy

                          Hi Steven,

                           

                          Sorry for the delay, the holidays got in the way!


                          The 9190 should run jQuery in RhoElements well, and we have a lot of doing just that so it needn't be a concern.

                           

                          I have written a script that relies on jQuery. This script will go to the next focusable element on Down key press and the previous focusable element on Up key press. The order of the focusable elements is the order in which they appear in the HTML document. If any fields are dynamically added or removed, the JavaScript automatically recalculates the list to allow selection of the new elements. This should do what you want*

                           

                          var arrowNavigate = {
                                    inputs: '',
                                    observer: '',
                            
                                    onStart: function()          {
                                              //This sets up the Mutation observer so that findFocusableElements() can be re-run when the DOM changes (i.e. add extra elements).
                                              if(window.MutationObserver || window.WebKitMutationObserver) { //Unfortunately MotoWebKit currently doesnt support either of these.
                                                        MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
                                                        arrowNavigate.observer = new MutationObserver(arrowNavigate.findFocusableElements);
                                                        arrowNavigate.observer.observe(document, {
                                                                  subtree: true,
                                                                  childList: true,
                                                                  attributes: true
                                                        });
                                              }
                                              else {
                                                        /* This is the older DOM Mutation Event methodology */
                                                        document.addEventListener('DOMSubtreeModified', arrowNavigate.findFocusableElements);
                                              }
                            
                                              arrowNavigate.findFocusableElements();
                                              document.addEventListener('keydown', arrowNavigate.onKeyDown);
                                    },
                            
                                    /**
                                     *          Finds all the focusable input elements. If there are some elements not selectable, then the element type will need to be added to the jQuery string.
                                     *          Currently finds:
                                     *                    input
                                     *                    button
                                     *                    textarea
                                     *                    select
                                     *                    option
                                     */
                                    findFocusableElements: function() {
                                              arrowNavigate.inputs = $('input:visible,button:visible,textarea:visible,select:visible,option:visible').filter(function(){
                                                        //Filters out those that arent selectable (disabled or invisible elements)
                                                        return (this.style.visibility != 'hidden' && this.style.opacity != '0' && !this.disabled);
                                              }).toArray();
                                    },
                            
                                    /**
                                     *          On up key press, select the previous focusable element; on down key press, select the next focusable element
                                     */
                                    onKeyDown: function(event) {
                                              if(event.keyCode == 38) { //up
                                                        var index = arrowNavigate.inputs.indexOf(document.activeElement);
                                                        if(index > 0)
                                                        {
                                                                  arrowNavigate.inputs[index - 1].focus();
                                                        }
                                              }
                                              else if(event.keyCode == 40) { //down
                                                        var index = arrowNavigate.inputs.indexOf(document.activeElement);
                                                        if(index >= 0 && index < arrowNavigate.inputs.length -1)
                                                        {
                                                                  arrowNavigate.inputs[index + 1].focus();
                                                        }
                                              }
                                    }
                          };
                          $(arrowNavigate.onStart); //Runs findFocusableElements() when DOM is ready
                          
                          

                           

                          *The only drawback is caused by a missing feature with the version of WebKit in RhoElements. It means that elements made visible/invisible by changing the CSS (i.e. changing 'display', 'visibility' or 'opacity') will not be automatically detected. This means that you will need to manually call:

                           

                          arrowNavigate.findFocusableElements();
                          

                           

                          after hiding/showing a focusable element via CSS.

                           

                          I have attached an example of how to use this script.

                           

                          I hope this solves your issues successfully.

                           

                          Best regards,

                          Ben