Как предотвратить появление клавиатуры на мобильных устройствах?

Question

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

Я пытаюсь использовать счетчик jQuery выше на своем веб-сайте (демонстрация его доступна в нижней части API).

Он работает действительно на компьютерах, но на мобильных устройствах клавиатура очень раздражающе появляется каждый раз, когда вы нажимаете кнопки вверх/вниз. Возможно ли предотвратить это? Spinner не очень хорошо реагирует на собственные функции, такие как .on ('click'), вместо этого он имеет свои собственные функции.

Как изменить код, чтобы клавиатура отображалась только при нажатии текстового поля, а не на кнопки вверх?

Это была моя попытка, она не работает:

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

Примечание: Я получил имя класса путем проверки кода, сгенерированного когда вертушка является created.Also, я супер новичок в веб-разработки, так что я я не уверен, что мне не хватает простого подхода.

Answer 1

Когда нажата кнопка «вверх», вход будет фокусом, поэтому клавиатура дисплея мобильного устройства, решение добавляет атрибут readonly, когда пользователь нажимает окно ввода, удаляет его, размывает, снова добавляет атрибут readonly.

увидеть фрагмент кода, чтобы понять, извините мой английский не достаточно, чтобы описать

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

Answer 2

Вам нужно только добавить атрибут readonly к input тега.

<input id="spinner" readonly> 

Answer 3

$(document).ready(function() { 
 
\t 
 
$(".spinner").spinner(); 
 
$(".spinner").click(function(event){ 
 
    $(this).removeAttr('readonly').select(); 
 

 
}); 
 
$(".spinner").blur(function(event){ 
 
    $(this).attr('readonly', 'readonly'); 
 
    
 
}); 
 
\t 
 
});

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