使用jQuery Spinner替代HTML5标签 input[type=number]

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

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

jQuery UI Spinner实例如下:

上例代码如下:

<script src="https://libs.baidu.com/jqueryui/1.10.4/jquery-ui.min.css"></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)。

上例中的参数为{ 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/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。

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

Pingbacks已关闭。

暂无评论

张贴您的评论