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

【问题标题】：How to prevent the keyboard from popping up on mobile devices?如何防止键盘在移动设备上弹出？
【发布时间】：2016-08-24 02:39:08
【问题描述】：

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 开发的超级新手，所以我不确定我是否缺少一种简单的方法。

【问题讨论】：

您在这里查看过答案吗？ stackoverflow.com/questions/3777669/…
您的控制台中是否有错误消息？在你的代码中应该是event.preventDefault()。
另一种方法是在文本输入上添加另一个隐藏层
没有错误信息，另一个问题的答案对我不起作用。即使它解决了这个问题，我也不能使用 readonly 属性，因为我仍然希望用户能够在他们直接希望的情况下输入数字。

标签： javascript jquery html css mobile

【解决方案1】：

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

看代码sn-p就明白了

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

【讨论】：

嘿，非常感谢！这正是我想要的，但是，要直接在文本框中输入，我需要在文本框上单击两次。第一次单击获得焦点，第二次单击调出键盘。你会碰巧知道如何解决这个问题吗？再次感谢，Bùi！
我已经编辑了sn-p的代码，但是我这里没有移动设备可以测试，希望它可以工作

【解决方案2】：

您只需将readonly 属性添加到input 标记即可。

<input id="spinner" readonly>

【讨论】：

乍一看可能看起来很傻，但它是我最简单的解决方案，可以弹出一个没有键盘烦人的时间选择器！
为什么一开始看起来很傻？
乍一看，因为它试图将某些内容放入只读元素中！ :)

【解决方案3】：

请让 onfocus="blur()"

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

【讨论】：

无法在 IOS 和 Android 设备上正常打开键盘。
在 9 月 21 日在 Android 上为我工作，谢谢！

【解决方案4】：

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

【讨论】：

你忘记放 jQuery min 文件了。
对不起！我忘了添加链接和脚本源，现在检查一下，但我需要突出显示 Spinner 上下箭头