使用jQuery实现input数值增量和减量的方法


Posted in Javascript onJanuary 24, 2015

本文实例讲述了使用jQuery实现input数值增量和减量的方法。分享给大家供大家参考。具体分析如下:

在很多电商网站中,在购物车所在页面,涉及到商品数量的时候,都会提供一个+号按钮和-号按钮来实现增1和减1,并且只允许input中输入数值。Bootstrap TouchSpin这款插件就是针对此需求而写。(Bootstrap TouchSpin这款插件点击此处本站下载。)

首先引入必要的css和js文件。

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />

<link href="css/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />

<script src="Scripts/jquery-2.1.3.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

<script src="Scripts/jquery.bootstrap-touchspin.min.js"></script>

一、控制数值的精度和自增自减量  

<br />

<div style="margin-left: 10px;">

        <form class="form-horizontal" role="form">

            <div class="form-group">

                <div class="col-xs-2">

                    <input id="demo1" type="text" value="55" name="demo1" class="form-control" />

                </div>

            </div>

        </form>

</div>

<script type="text/javascript">

        $(function () {

            $("input[name='demo1']").TouchSpin({

                min: 0,

                max: 100,

                step: 0.1,//增量或减量

                decimals: 2, //精度

                boostat: 5,

                maxboostedstep: 10,

                postfix: '%' //后缀

            });

        });

</script>

使用jQuery实现input数值增量和减量的方法

● 点击+号按钮自增0.1
● 点击-号按钮自减0.1
● 保留2位小数点
● 允许的最小数值0.00
● 允许的最大数值100.00
● 只允许输入数值,否则失去焦点显示最小值0.00

二、只允许从1开始的整数,这也是购物车页面常用的做法

<div style="margin-left: 10px;">

        <form class="form-horizontal" role="form">

            <div class="form-group">

                <div class="col-xs-2">

                    <input id="demo2" type="text" value="1" name="demo2" class="form-control" />

                </div>

            </div>

        </form>

</div>

<script type="text/javascript">

        $(function () {

            $("input[name='demo2']").TouchSpin({

                min: 1,

                max: 100,

                step: 1//增量或减量

            });

        });

</script>

使用jQuery实现input数值增量和减量的方法

● 点击+号按钮自增1
● 点击-号按钮自减1
● 允许的最小数值1
● 允许的最大数值100
● 只允许输入数值,否则失去焦点显示最小值1

至于其它用法,感兴趣的朋友可参考相关文档。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
利用express启动一个server服务的方法
Sep 17 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 #Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
jQuery选择器querySelector的使用指南
Jan 23 #Javascript
jQuery中DOM操作实例分析
Jan 23 #Javascript
You might like
通过html表格发电子邮件
2006/10/09 PHP
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
webpack4+react多页面架构的实现
2018/10/25 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
Python 字典与字符串的互转实例
2017/01/13 Python
深入理解Python中的super()方法
2017/11/20 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
本科生详细的自我评价
2013/09/19 职场文书
采购部岗位职责
2013/11/24 职场文书
求职自荐信格式
2013/12/04 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
建筑节能汇报材料
2014/08/22 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
综合测评自我评价
2015/03/06 职场文书
《小小的船》教学反思
2016/02/18 职场文书