1

I built a site with a few input boxes with type="number". Some jQuery detects when the values in these boxes change, performs a calculation, and shows the user the result. There is no form submission. There isn't even a form, just input boxes.

That works great on desktop.

However, on mobile there's a problem. On Chrome on Android, when the user clicks on the input box the mobile keyboard pops up. That's fine. The keyboard includes a "Go" button. Currently the Go button does nothing, and the keyboard remains when the user clicks on Go. I want the Go button to simply hide the mobile keyboard.

Any ideas on how to do this?

chasmani
  • 2,362
  • 2
  • 23
  • 35

2 Answers2

6

The "Go" button on the mobile keyboard sends an "Enter" keypress to the input box. To make the keyboard disappear, blur the focus on the input field when the user clicks enter. This bit of jQuery does the job:

$("#inputElementId").on("keypress", function(event){
    if (event.keyCode == 13) {
            event.preventDefault();
            event.target.blur()
        }
})
chasmani
  • 2,362
  • 2
  • 23
  • 35
1

If you don't want them to be able to click on the input box why not make it readonly?

 <input type="text" readonly>

Or see this other post about mobile keyboards as it may be more what you are looking for: HTML Mobile -forcing the soft keyboard to hide

MMallette
  • 124
  • 7