3

I am using HTML/JavaScript and PhoneGap/Cordova to develop a small Scattergories-like game in which users have to type words related to a topic.

The app uses Ionic keyboard plugin to show the soft keyboard at the beginning of the round, and to hide it at the end. During the round, there is a simple form that reads the words and stores them upon submit:

<form action="javascript:addWord();">
    <input type="text" id="textbox_text" value="" />
    <input type="submit" id="textbox_skip" value="" />
</form>

That after styling looks like this (showing soft keyboard):

text input, submit button, and keyboard

I am getting two different behaviors depending on how the form is submitted:

  • When the form's submit button is clicked: the word in the textbox is submitted, the keyboard remains up, and the textbox is focused again. (the expected behavior, not hiding the keyboard at all).

  • When the soft keyboard's "Go" button is clicked: the word in the textbox is submitted, the keyboard goes down, the textbox is focused again, and the keyboard goes back up. (creating an annoying flash).

How can I prevent the keyboard from hiding after pressing the "Go" button just using Cordova?

I have searched online and found what seemed like good leads, but none of them gave me the desired behavior (even when the functions were being called, the keyboard was still hiding then showing).

Also tried "cheating the keyboard" by using a secondary (not visible) text input that was focused when clicking on "Go" (its keycode is 13, like 'enter'), to then focus the primary input text after the form was submitted. But no luck.

Then I tried by listening to the native.keyboardhide event as specified in the keyboard plugin documentation, also no success:

window.addEventListener('native.keyboardhide', keyboardHideHandler);

...

// I tried a function similar to this one for when the key pressed was "Go"
function keyboardHideHandler(ev) {
    ev.preventDefault();
    ev.stopPropagation();
    return false;
}

I tried Rami's suggestion, but the solution to https://stackoverflow.com/a/15457800/4224337 didn't work either. The keyboard still goes down and up after clicking on "Go."

So I guess my question can be divided in:

  • What happens when clicking on "Go" that makes it behavior different? (maybe the problem is that I don't understand the keyboard's flow); and

  • Is there a way of preventing the keyboard from hiding after clicking on "Go" using exclusively PhoneGap/Cordova (and any of their plugins)?

Community
  • 1
  • 1
Alvaro Montoro
  • 28,081
  • 7
  • 57
  • 86
  • 2
    When you tried "cheating the keyboard" you need a click event to show the keyboard (just focusing without an event will not work). Try this workaround: http://stackoverflow.com/a/15457800/4224337 , otherwise maybe you need to create a custom class for the keyboard, something like that: https://github.com/phonegap/phonegap/wiki/How-to-show-and-hide-soft-keyboard-in-Android – Rami Feb 15 '15 at 09:38
  • I will try the click event instead of just the focus, and will write the results later. Thanks for the link! – Alvaro Montoro Feb 16 '15 at 19:08
  • I tested the solution from http://stackoverflow.com/a/15457800/4224337 and it didn't work. The keyboard still hides then shows up. – Alvaro Montoro Feb 17 '15 at 03:56
  • Give a try with this: http://stackoverflow.com/a/25899264/4224337 – Rami Feb 17 '15 at 07:58

0 Answers0