6 Replies Latest reply on Jun 16, 2016 1:17 PM by kerrishotts

    Hide the Keyboard

    zaeem.esipick Level 1

      Hello There,


      The scenario is, when we click on the input field, the keyboard appears and the form gets submitted on clicking the button. Now, if an error occurs, it hides behind the keyboards that is already opened when we clicked on the input field and the user is unable to see the error message.


      How can we close the keyboard programatically?



        • 1. Re: Hide the Keyboard
          kerrishotts Adobe Employee

          Can you share some screenshots of what you're seeing? I'm guessing at what's happening, and it'd be nice to see something concrete. Also, some code might be useful (namely the form & submit button HTML).


          That said, there's a plugin that allows programmatic control over the soft keyboard: https://www.npmjs.com/package/ionic-plugin-keyboard . I'm not sure that's the best answer in your case without seeing what you're seeing.

          • 3. Re: Hide the Keyboard
            zaeem.esipick Level 1

            So, there is an error message displayed under the input field that has keyboard covering it. The validation is done through the angularjs. So, how to hide keyboard here, so that the user can view the error message.

            • 4. Re: Hide the Keyboard
              kerrishotts Adobe Employee

              What is the user doing in this case to get the error message? Are they tapping something (the --> button maybe?), or is the error automatically generated?

              • 5. Re: Hide the Keyboard
                zaeem.esipick Level 1

                On this screen, the user enters a code, an API call (triggers on 'on-change') checks the code and displays the error if the code is wrong. In the image above, there is an error message that is behind the keyboard.


                On the other screen, there is a form validation in angularjs, and on that screen, too, the same behavior is shown.

                • 6. Re: Hide the Keyboard
                  kerrishotts Adobe Employee

                  So, it is your app's responsibility to indicate the error in a location that's not hidden by the keyboard. There's lots of ways to accomplish this -- either by scrolling the page far enough so that the input field and error message are visible at the same time, or indicating an error by some other means (like coloring the field and adding a red X next to it), etc.


                  I'm not sure the wisdom of checking the code on each change of the field, either. That's a lot of checking going on, and perhaps it would be better to do the check after the user indicates they are finished with the entry (via submit or a button). At that point the problem goes away anyway, since the field is blurred and the keyboard will disappear on its own.


                  Also, FYI: the plugin I pointed to earlier in the thread can provide you the height of the keyboard when it appears so that you can position your inputs and messages appropriately.