Search code examples
javascripthtmlipadtablet

HTML Mobile -forcing the soft keyboard to hide


I am developing the front end site for a coupon company, and I have a page where the user only needs to input phone number and $$ spent. We came up with a fun on-screen keyboard built in Javascript, that is easy to use, and fast. However, I am looking for a solution to stop the soft keyboard from popping when the user focuses and enters text/numbers in those fields.

I know about the "number/phone/email" type attributes that HTML5 came up with. However, at the risk of sounding crazy, I really want to just use my on-screen keyboard.

Note: this web site is mostly targeted to tablets.

Thanks.


Solution

  • Since the soft keyboard is part of the OS, more often than not, you won't be able to hide it - also, on iOS, hiding the keyboard drops focus from the element.

    However, if you use the onFocus attribute on the input, and then blur() the text input immediately, the keyboard will hide itself and the onFocus event can set a variable to define which text input was focused last.

    Then alter your on-page keyboard to only alter the last-focused (check using the variable) text input, rather than simulating a key press.