如何防止键盘在移动设备上弹出？

Question

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

我正在尝试在我的网站中使用上面的 jQuery 微调器（API 底部提供了它的演示）。

它在计算机上确实有效，但在移动设备上，每次单击向上/向下按钮时，键盘都会非常烦人地弹出。是否有可能防止这种情况发生？微调器对 .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

注意：我通过检查创建微调器时生成的代码获得了类名。另外，我是 Web 开发的新手，所以我不确定我是否缺少一种简单的方法。

Answer 1

单击步进按钮时，输入将成为焦点，因此移动设备显示键盘，解决方案是添加只读属性，当用户单击输入框时，将其删除，模糊时，再次添加只读属性。

查看代码片段以了解

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