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
注意:我通过检查创建微调器时生成的代码获得了类名。另外,我是网络开发的 super 新手,所以我不确定我是否错过了一个简单的方法。
最佳答案
当点击 step up 按钮时,input 将成为焦点,因此移动设备显示键盘,解决方案是添加 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" >
关于javascript - 如何防止键盘在移动设备上弹出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39113558/