CODEWITHSUNDEEP
javascriptjqueryhtmlcssmobile
Ammar Akhtar
Ammar Akhtar

Reputation: 81

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

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.

Upvotes: 5

Views: 27522

Answers (4)

Krishnamoorthy Acharya
Krishnamoorthy Acharya

Reputation: 4254

Please make onfocus="blur()"

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

Upvotes: 3

Kevin Bui
Kevin Bui

Reputation: 524

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

Upvotes: 7

developer
developer

Reputation: 1

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

Upvotes: 0

Mike in Coloma
Mike in Coloma

Reputation: 94

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

<input id="spinner" readonly>

Upvotes: 4

Related Questions