/

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.

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.

• javascript
• jquery
• html
• css
• mobile

• Have you checked out the answers here? stackoverflow.com/questions/3777669/… – Xetnus Commented Aug 24, 2016 at 2:44
• Is there error message in your console? It should be event.preventDefault() in your code. – Sky Commented Aug 24, 2016 at 2:47
• an alternative way would be to add another hidden layer over the text-input – Jeremy John Commented Aug 24, 2016 at 3:42
• There is no error message, and the answers in the other question do not work for me. I can't use readonly attribute even though it fixes this problem because I still want the users to be able to type in numbers if they directly wish to do so. – Ammar Akhtar Commented Aug 24, 2016 at 3:55

4 Answers 4

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

You only need to add the readonly attribute to the input tag.

<input id="spinner" readonly>

Please make onfocus="blur()"

<input id="spinner" onfocus="blur()"/>

$(document).ready(function() {
	
$( ".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 class="spinner" min="1" max="9" value="1" height="40px" readonly="readonly" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">