jQuery UI中提供的Spinner组件可以将input[type=text]文本框转换为一个数字输入框，类似于HTML中新增的input[type=number]，并支持使用键盘上下键以及鼠标滚轮对其中的数值进行更改。

注：鼠标滚轮事件缺省只支持部分浏览器，可使用jQuery Mousewheel插件添加跨浏览器的鼠标滚轮事件支持

jQuery UI Spinner实例如下：

Select a value:

上例代码如下：

<link href="//libs.useso.com/js/jqueryui/1.10.4/css/jquery-ui.min.css" rel="stylesheet" />
<script src="//libs.useso.com/js/jqueryui/1.10.4/jquery-ui.min.js"></script><script type="text/javascript">
  $(function() {
    $( "#spinner" ).spinner();
  });
</script>

<p>
  <label for="spinner">Select a value:</label>
  <input id="spinner" name="value" />
</p>

此外，可以通过设定Option参数指定Spinner的属性

例如设定Spinner的最小值（min），最大值（max），步长（step）。

Select a value:

上例中的参数为{ min : 0, max : 100, step : 5}

上例的代码为：

<script type="text/javascript">
  $(function() {
    $( "#spinner2" ).spinner({min : 0, max : 100, step : 5});
  });
</script>

<p>
  <label for="spinner2">Select a value:</label>
  <input id="spinner2" />
</p>

HTML5中的input[type=number]标签效果如下，浏览器必须支持HTML5，否则标签将降级为input[type=text]：

HTML5 input[type=number]标签：

本文链接：http://bookshadow.com/weblog/2014/11/20/jquery-spinner-html-input-type-number/
请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。

如果您喜欢这篇博文，欢迎您捐赠书影博客： ，查看支付宝二维码