近期在开发一个地方O2O租书项目,使用ASP.NET MVC技术,其中在图书详情页,用户可以输入借阅的数量,这里使用了js来控制数量的增减和校验。
1.数量一定是数字
2.点击增减按钮的时候要能自动加1或减1
3.用户输入的内容如果是非数字,则不能输入(退格键除外)
4.用户输入的值最小为1
5.输入框离开焦点时要检查取值范围,确保输入框中必须是范围内的数字
基本就是以上几点
效果如下:
以下是Html代码
<div class="bookNum"> <a id="sub" href="javascript:void(0);">-</a> <input type="text" value="1" id="bookNum"> <a id="add" href="javascript:void(0);">+</a> <a href="javascript:void(0);" id="addCart">加入借阅台</a> <div class="clear"></div> </div>
首先看第一条:
输入一定是数字
这很容易想到用keyup事件监测,用正则表达式替换非数字字符
$("#bookNum").keyup(function(){ var regex = /[^\d]*/g; var numVal = $(this).val(); numVal = numVal.replace(regex,""); numVal = parseInt(numVal)||; numVal = numVal < "htmlcode">$("#bookNum").keypress(function(b) { var keyCode = b.keyCode "htmlcode">$("#bookNum").keypress(function(b) { var keyCode = b.keyCode "#bookNum").val()) || 0; numVal = numVal < 1 "#bookNum").val(numVal); } }).blur(function() { var numVal = parseInt($("#bookNum").val()) || 0; numVal = numVal < 1 "#bookNum").val(numVal); });这样就能保证用户在输入数字的时候的校验。
使用按钮控制就更容易了:
//增加 $("#add").click(function() { var num = parseInt($("#bookNum").val()) || 0; $("#bookNum").val(num + 1); }); //减去 $("#sub").click(function() { var num = parseInt($("#bookNum").val()) || 0; num = num - 1; num = num < 1 "#bookNum").val(num); });好了,这样就完美解决用户输入了。
当然,这里仅仅说明了js的控制,里面还可以加入其它控制,比如最大限制,库存查询,服务器校验等。这里就不再赘述。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 《绝对主打 流行原创金曲 2CD》[WAV分轨][1.1GB]
- 《赛博朋克2077》更新上线:支持AMD FSR3
- 《塞尔达传说:智慧的再现》提前半个月偷跑,引发玩家担忧
- 战锤40K星际战士2全职业介绍|全职业技能效果一览
- 陈百强《2006世纪10星·永恒篇[环球]》[WAV整轨]
- 【新世纪钢琴】VA-GoldenOctober(Piano)(金秋十月钢琴篇)【FLAC】
- 青稞荞麦《破茧》新生代组合[WAV+CUE]
- 因系统升级后出现BUG 《FF16》PS5完全版宣布延期
- 《黑神话:悟空》周伯通!大佬用左右手分别挑战两只虎先锋
- 《黑神话:悟空》攻击动作致敬《大话西游》:这也太帅了!
- 《星舰铳犬太阳系物语》游戏背景介绍
- 《战锤40K星际战士2》终极版有后续DLC说明
- 《第9层》游戏特色玩法介绍
- 刀郎.2006-刀郎【九雨天下】【WAV+CUE】
- 59.9高校生.1994-素兰万岁【上华】【WAV+CUE】