使用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 相关文章推荐
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 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
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
解析dedecms空间迁移步骤详解
2013/05/15 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
基于jQuery的仿flash的广告轮播
2010/11/05 Javascript
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
Python操作MongoDB数据库的方法示例
2018/01/04 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
python asyncio 协程库的使用
2021/01/21 Python
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
中软国际Java程序员笔试题
2014/07/19 面试题
自我鉴定怎么写
2014/01/12 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
个人收入证明范本
2014/09/18 职场文书
盗窃案辩护词
2015/05/21 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android
Python简易开发之制作计算器
2022/04/28 Python