使用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 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
js实现一键复制功能
Mar 16 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
js生成1到100的随机数最简单的实现方法
Feb 07 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
Js和VUE实现跑马灯效果
May 25 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基于curl实现模拟微信浏览器打开微信链接的方法示例
2019/02/15 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
React优化子组件render的使用
2019/05/12 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
js实现拖拽元素选择和删除
2020/08/25 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
更改Python命令行交互提示符的方法
2015/01/14 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
解析Python中的__getitem__专有方法
2016/06/27 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python如何定义带参数的装饰器
2018/03/20 Python
python实现推箱子游戏
2020/03/25 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
详解python持久化文件读写
2019/04/06 Python
python+OpenCV实现车牌号码识别
2019/11/08 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
python 根据列表批量下载网易云音乐的免费音乐
2020/12/03 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
少年雷锋观后感
2015/06/10 职场文书