使用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 插件 人性化的消息显示
Jan 21 Javascript
JavaScript判断一个URL链接是否有效的实现方法
Oct 08 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
JavaScript中日期的相关操作方法总结
Oct 24 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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
生成缩略图
2006/10/09 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP微信分享开发详解
2017/01/14 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
canvas压缩图片转换成base64格式输出文件流
2017/03/09 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
jquery实现上传图片功能
2020/06/29 jQuery
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Keras中的多分类损失函数用法categorical_crossentropy
2020/06/11 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
工作保证书怎么写
2015/02/28 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书