5

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.

Ammar Akhtar
  • 83
  • 1
  • 2
  • 9
  • Have you checked out the answers here? http://stackoverflow.com/questions/3777669/prevent-keyboard-from-popping-on-textbox-focus-click-in-ipad-webapps – Xetnus Aug 24 '16 at 02:44
  • Is there error message in your console? It should be `event.preventDefault()` in your code. – Sky Aug 24 '16 at 02:47
  • an alternative way would be to add another hidden layer over the text-input – Jeremy John Aug 24 '16 at 03: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 Aug 24 '16 at 03:55

4 Answers4

7

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" >
Kevin Bui
  • 524
  • 3
  • 10
  • Hey thank you so much! This is exactly what I was looking for, however, to type directly into the the text box, I need to click on the text box twice. The first click gets the focus, the second click brings up the keyboard. Would you happen to know how to fix that? Thanks again, Bùi! – Ammar Akhtar Aug 24 '16 at 05:56
  • i have edited the code snippet, but i don't have a mobile device here to test, hope it work – Kevin Bui Aug 24 '16 at 07:15
4

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

<input id="spinner" readonly>
flyinryan
  • 94
  • 1
  • 12
3

Please make onfocus="blur()"

<input id="spinner" onfocus="blur()"/>
Krishnamoorthy Acharya
  • 3,846
  • 36
  • 29
0

$(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">
developer
  • 1
  • 3