HTML Mobile -Forcing the Soft Keyboard to Hide

Making soft keyboard automatically disappear once user submits a form on a mobile device

You could just use

$('form').on('submit', function() {
  $('input').blur();
});

To lose focus on the button once submitted

How to prevent the keyboard from popping up on mobile devices?

When step up button is clicked, the input will be focus, so mobile device display keyboard, the solution is add readonly attribute, when user click input box, remove it, on blur, add readonly attribute again.

see the code snippet to understand

$( "#spinner" ).spinner();$( "#spinner" ).click(function(event){  $(this).removeAttr('readonly').select();});$( "#spinner" ).blur(function(event){  $(this).attr('readonly', 'readonly');});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"   integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="   crossorigin="anonymous"></script><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  <input id="spinner" >

Mobile HTML input textbox hide soft keypad on submit

The correct way to do this for mobile is to blur your search text box.

OnSubmit
$('#search_text_box').blur();

It will hide the virtual keyboard.

---

Related Topics