使用jQuery实现input数值的增量和减量
在很多电商网站中,在购物车所在页面,涉及到商品数量的时候,都会提供一个+号按钮和-号按钮来实现增1和减1,并且只允许input中输入数值。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>
● 点击+号按钮自增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>
● 点击+号按钮自增1
● 点击-号按钮自减1
● 允许的最小数值1
● 允许的最大数值100
● 只允许输入数值,否则失去焦点显示最小值1
其它用法,请参考文档。
使用jQuery实现input数值的增量和减量的更多相关文章
- 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
基于jQuery的input输入框下拉提示层,方便用户输入邮箱时的提示信息,需要的朋友可以参考下 效果图 // JavaScript Document (function($){ $.fn ...
- 为什么Jquery对input file控件的onchange事件只生效一次
今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...
- JQuery设置input属性(disabled、enabled)
document.getElementById("removeButton").disabled = false; //普通Js写法 $("#removeButton&q ...
- JQuery让input从disabled变成enabled
JQuery让input从disabled变成enabled document.getElementByIdx_x("removeButton").disabled = false ...
- jQuery 操作 input 之 checkbox
jQuery 操作 input 之 checkbox 一片 HTML 清单: <input type="checkbox" name="hobby" va ...
- jQuery Tags Input 插件显示选择记录
利用jQuery Tags Input 插件显示选择记录 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采 ...
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- Jquery对于input事件的处理
Jquery对于input事件的处理.获取此表单元素,以及其内容 .text()不能使用在表单选项上 要使用.val() input元素使用类似onblur(this),事件在function(obj ...
随机推荐
- 查看IP以及连接数
AWK: time awk 'BEGIN{while("netstat -an"|getline){if( $5 ~ /[1-255]/){split($5,t1,":& ...
- Winform/WPF Clipboard之剪切复制粘贴
Winform // <summary> /// 复制或剪切文件至剪贴板(方法) /// </summary> /// <param name="files&q ...
- Codeforces 600E - Lomsat gelral 「$Dsu \ on \ tree$模板」
With $Dsu \ on \ tree$ we can answer queries of this type: How many vertices in the subtree of verte ...
- Python 3之str类型、string模块学习笔记
Windows 10家庭中文版,Python 3.6.4, Python 3.7官文: Text Sequence Type — str string — Common string operatio ...
- emulator: ERROR: x86 emulation currently requires hardware acceleration!Please ensure Intel HAXM is properly installed and usable.CPU acceleration status: HAX kernel module is not installed!
Android Studio 1.0 已经放出来了,以后的Android平台开发激昂逐步从Eclipse向Android Studio迁移,为了能不落伍我也特意从Google下载了Android St ...
- LeetCode(17):电话号码的字母组合
Medium! 题目描述: 给定一个仅包含数字 2-9 的字符串,返回所有它能表示的字母组合. 给出数字到字母的映射如下(与电话按键相同).注意 1 不对应任何字母. 示例: 输入:"23& ...
- TcxGrid 内容 行高度
- AC自动机学习笔记-1(怎么造一台AC自动机?)
月更博主又来送温暖啦QwQ 今天我们学习的算法是AC自动机.AC自动机是解决字符串多模匹配问题的利器,而且代码也十分好打=w= 在这一篇博客里,我将讲解AC自动机是什么,以及怎么构建一个最朴素的AC自 ...
- 微信WeixinJSBridge的接口使用
以下都要包含weixinApi.js(见底部git里的js文件) 1).分享 WeixinApi.ready(function(Api) { // 微信分享的数据 var wxData = { &qu ...
- 【LOJ】#2109. 「JLOI2015」骗我呢
题解 我深思熟虑许久才算是明白个大概的计数问题吧 先是转化成一个矩形,列一条直线y = x,y = x - (m + 1)我们从(0,0)走到(n + m + 1,m + 1)就是答案 因为我们起始相 ...