Question

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

我正在尝试在我的网站上使用上面的jQuery微调器（它的一个演示可以在API的底部找到）。

它可以在计算机上运行，但在移动设备上，每次单击向上/向下按钮时，键盘都会非常烦人地弹出。有可能防止这种情况发生吗？微调器对.on（＆＃39; click＆＃39;）等本机函数的反应并不是很好，相反它有自己的功能。

如何修改代码，以便只在单击文本框时显示键盘，而不是上下按钮？

这是我的尝试，它不起作用：

Settings for extension html: Type = text/html, Compression = Normal.
Adding "C:\SNIP\Content\StartPage.html" to the package as a payload file.  Its path in the package is "Content\StartPage.html".

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

Answer 1

当点击升级按钮时，输入将被聚焦，因此移动设备显示键盘，解决方案是添加readonly属性，当用户点击输入框，删除它，模糊时，再次添加readonly属性。

请参阅代码段以了解

＆＃13;

$( "#spinner" ).spinner();
$( "#spinner" ).click(function(event){
  $(this).removeAttr('readonly').select();
});
$( "#spinner" ).blur(function(event){
  $(this).attr('readonly', 'readonly');
});

＆＃13;

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

＆＃13;

Answer 2

您只需将readonly属性添加到input代码。

<input id="spinner" readonly>

Answer 3

＆＃13;

$(document).ready(function() {
	
$( ".spinner" ).spinner();
$( ".spinner" ).click(function(event){
  $(this).removeAttr('readonly').select();

});
$( ".spinner" ).blur(function(event){
  $(this).attr('readonly', 'readonly');
  
});
	
});

＆＃13;

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

＆＃13;

Answer 4

请设置onfocus =“ blur（）”

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

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

4 个答案: