6 Replies Latest reply on Apr 22, 2015 12:31 PM by Jon Tara

    Capturing 'Next' Key on Android Keyboard (Numeric Keypad)

    Bryn Cranswick

      Hello,

       

      I'm trying to capture the 'Next' key on the android numeric SIP but i'm having no luck.

      It should be interpreted as a 'TAB' but nothing is firing on my listener:

       

          $('#TSimpleFieldInputTable').on('keydown', 'input[type=number]', function (event){

            console.log('on keydown:' + event.which);

          });

       

      This logs every other button pressed on the sip 1-9, decimal etc... but nothing for the Next key.

       

      When the SIP is opened from a type = 'text' input i'm able to capture the 'Go' as it's interpreted as an enter (keyCode === 13)

       

      Has anyone else faced this issue?

       

      I'm using RhoStudio 5.0.30, building for a TC55 with JellyBean using native_browser.

       

       

      If this fails i'm going to have to scrap the default sip and make my own using jquery

        • Re: Capturing 'Next' Key on Android Keyboard (Numeric Keypad)
          Robert Galvin

          Have you tried using the KeyCapture API: Rhomobile | KeyCapture

           

          You can capture all and then inspect the KeyCode that is returned for the Next Key and then just look for that.

          1 of 1 people found this helpful
            • Re: Capturing 'Next' Key on Android Keyboard (Numeric Keypad)
              Bryn Cranswick

              Hey Rob,

               

              Appreciate the help but I don't yet have a Silver licence for RhoMobile 5 so can't use the hardwarekeys extension. I need to get more customers using my app before i'll be purchasing this. I can capture the Next key fine using Jquery keydown listeners on Android KitKat (4.4.4) but it's a no go for JellyBean. Have you heard anything about TC55's running KitKat with RhoMobile and Enterprise Home Screen?

              • Re: Capturing 'Next' Key on Android Keyboard (Numeric Keypad)
                Bryn Cranswick

                Ok so I downgraded back to RhoMobile 4.1.1 so I could try capture the key using the KeyCapture API

                 

                $(document).ready(function(){

                     Rho.KeyCapture.captureKey(true, 'all', keyCallback);  

                });

                 

                function keyCallback(result) {

                       alert("this key has just been pressed!: " + result.keyValue);

                   }

                 

                 

                Unfortunately it still couldn't capture the next key (see below video)

                 

                  • Re: Capturing 'Next' Key on Android Keyboard (Numeric Keypad)
                    Jon Tara

                    Did you try a Google search? I found this. It looks like you can do it without any native extension.

                     

                        jquery - "Next" button on Android Numeric keypad - Stack Overflow

                     

                    Unfortunately, keypress and keyup events do not detect the next key event, so you need to bind it on keydown.

                     

                    FWIW, somewhat related, I now have permission to open-source my iOS Keyboard extension for Rhodes. It is similar to this Cordova/PhoneGap plugin, which was independently developed by somebody else, but has very similar code:

                     

                        driftyco/ionic-plugins-keyboard · GitHub

                     

                    That plugin also has some Android support, but I haven't looked at just what it does for Android.

                     

                    I'm going to see if the author of that plugin is interested in coordinating. I already see that the PhoneGap plugin has some iOS8-specific fixes that I need, and at the same time is lacking some features of my Rhodes extension.

                     

                    Currently, my Keyboard extension has no Android support, but I will see if it makes sense to incorporate the Android support from the PhoneGap plugin into my Rhodes extension.

                     

                    I use this extension to solve iOS keyboard issues when scrolling forms using iScroll. It's able to disable the native scroll of the WebView which normally attempts to bring each focused input into view (which will fail if you are using any sort of sub-page scrolling) and provides (Ruby) callbacks and (Javascript) events when keyboard actions occur (keyboard show/hidden) and keyboard dimensions.

                    1 of 1 people found this helpful
                      • Re: Capturing 'Next' Key on Android Keyboard (Numeric Keypad)
                        Bryn Cranswick

                        Hi Jon,

                         

                        Yup I tried binding on keydown but no luck. It's like the button isn't joined to anything. The problem goes away when using KitKat or newer versions of Android so hopefully I can just upgrade our current TC55 customers to KitKat when this gets released by Zebra shortly.

                         

                        Upgrading to KitKat won't solve the keyboard popup issues, i.e. running this code on page load:

                         

                        //doesn't bring up keyboard

                        $('#input1).focus().select();

                         


                        //So apparently Android only brings up the keyboard if you click(or tap) the input. You'd think this would work:

                         


                        //also doesnt bring up keyboard

                        $('#input1).click();


                        $('#input1').on('click', function(){

                             $(this).focus();

                        });


                        //Turns out it knows it's not a real click so still doesn't work

                         

                         

                         


                        //I also tried building a JS click event from scratch to truely mimic a real click but faced more issues and lost too much hair to continue


                         

                        So that keyboard extension you're working on sounds awesome!

                          • Re: Capturing 'Next' Key on Android Keyboard (Numeric Keypad)
                            Jon Tara

                            Not very familiar with Android. But iOS has a similar thing, there are the > and < buttons in the Keyboard Accessory bar. This isn't a part of your page, and it also isn't technically a part of the virtual keyboard. Officially, it's called the Keyboard Accessory, but also sometimes called Forms Assistant. The purpose is to allow you to quickly move focus between inputs.

                             

                            It MIGHT be possible for a native extension to capture clicks on these buttons, and forward them to the browser as events. You might want to do some searches.

                             

                            In iOS, it is possible to remove the Keyboard Accessory (with native code). And, in fact, both my Rhodes extension and the PhoneGap/Cordova plugin I mentioned offer that option.

                             

                            When I get to it, I will see if Android does something similar and if my extension can help solve that problem. You might want to browse the PhoneGap plugin's Android code to see if it has something similar for Android.

                             

                            Edit: no, it doesn't. The Android implementation of that plugin is very limited in functionality. It only implements sending keyboard show/hide events to the webview. This is useful for dealing with the fundamental issue that both that plugin and my own code address - discovering when the keyboard is shown, and how big it is. iOS and Android deal with this in very different ways, though. Android reduces the size of the browser viewport. iOS doesn't change the size of the viewport, perhaps because they always had in mind what was implemented in iOS7, which is that it's possible to see webview content "behind" the virtual keyboard.  Since iOS does not change the size of the viewport, they have to take a round-about way of getting inputs into view as the user steps through. Android can just scroll the WebView's viewport. iOS instead is a sneaky devil, and scrolls the WebView itself, inside of a native window. (And so both solutions provide the ability to block that scrolling in iOS.)


                            I  wonder if an option is just (using native code) remove those buttons? I've considered that solution for iOS, since it is possible to turn the iOS Keyboard Accessory off. Then you just implement your own navigation controls in your web page. (That means you have to implement your own code to move from one input to the next.)  But I was eventually able to solve the problem another way, and so never pursued that option.