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

Question

http://api.jqueryui.com/spinner/

I am trying to use the jQuery spinner above in my website (a demo of it is available at the bottom of API).

It works really work on computers, but on mobile devices, the keyboard very annoyingly pops up every time one clicks the up/down buttons. Is it possible to prevent this from happening? The spinner does not really respond well to native functions like .on('click'), instead it has its own functions.

How do I modify the code so that the keybooard only shows up when the textbox is clicked, not the up-down buttons?

This was my attempt, it does not work:

$( function() {
    $('.ui-spinner a').on('click', function() {
        $(':focus').blur();
});

})  // Updated code, I can now see the focus being lost on desktops, but still not mobile devices

Note: I got the class name by inspecting the code generated when the spinner is created.Also, I am super new to web development so I am not sure whether I am missing an easy approach.

Answer 1

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" >