godaddy主机到网站,湖南网站设计费用,商丘做网站公司新站seo快速收录网页内容页的方法,温州seo网站推广商城商品购买数量增减的完美JS效果 近期在开发一个地方O2O租书项目#xff0c;使用ASP.NET MVC技术#xff0c;其中在图书详情页#xff0c;用户可以输入借阅的数量#xff0c;这里使用了js来控制数量的增减和校验。 数量一定是数字 点击增减按钮的时候要能自动加1或减1 … 商城商品购买数量增减的完美JS效果 近期在开发一个地方O2O租书项目使用ASP.NET MVC技术其中在图书详情页用户可以输入借阅的数量这里使用了js来控制数量的增减和校验。 数量一定是数字 点击增减按钮的时候要能自动加1或减1 用户输入的内容如果是非数字则不能输入(退格键除外) 用户输入的值最小为1 输入框离开焦点时要检查取值范围确保输入框中必须是范围内的数字 基本就是以上几点 效果如下 以下是Html代码 div classbookNuma idsub hrefjavascript:void(0);-/a input typetext value1 idbookNum a idadd hrefjavascript:void(0);/a a hrefjavascript:void(0); idaddCart加入借阅台/a div classclear/div /div 首先看第一条 输入一定是数字 这很容易想到用keyup事件监测用正则表达式替换非数字字符 1 $(#bookNum).keyup(function(){
2 var regex /[^\d]*/g; 3 var numVal $(this).val(); 4 numVal numVal.replace(regex,); 5 numVal parseInt(numVal)||1; 6 numVal numVal 1 ? 1 : numVal; 7 $(this).val(numVal); 8 }); 这样就可以保证用户输入的一定是数字了并且我们中间做了校验如果使用parseInt转换为整数后值是NaN就让值为1 但是我们会发现一个现象就是用户如果想清空里面的值输入20的时候发现里面的值总是会变成1 这是不合理的并且体验也不好在输入非数字的时候会先显示那个字符然后被替换掉。 再观察一下当当网京东这些网站当输入非数字时输入框根本就不会有任何动静退格后 还能随意输入数字。经研究发现他们使用了监控键盘的方法拦截输入。 经过改进后 $(#bookNum).keypress(function(b) {var keyCode b.keyCode ? b.keyCode : b.charCode;if (keyCode ! 0 (keyCode 48 || keyCode 57) keyCode ! 8 keyCode ! 37 keyCode ! 39) { return false; } else { return true; } }) 这样我们保证了在用户使用取消回车(0)退格(8)左右箭头(37 39)和数字时 正常输入其他按键就统统失效了。这样就能保证输入的内容是数字了。 但是还有一个问题用户使用退格键将内容清空后用户没有输入的时候值为空 这就要使用keyup和blur事件来弥补了 $(#bookNum).keypress(function(b) {var keyCode b.keyCode ? b.keyCode : b.charCode;if (keyCode ! 0 (keyCode 48 || keyCode 57) keyCode ! 8 keyCode ! 37 keyCode ! 39) { return false; } else { return true; } }).keyup(function(e) { var keyCode e.keyCode ? e.keyCode : e.charCode; console.log(keyCode); if (keyCode ! 8) { var numVal parseInt($(#bookNum).val()) || 0; numVal numVal 1 ? 1 : numVal; $(#bookNum).val(numVal); } }).blur(function() { var numVal parseInt($(#bookNum).val()) || 0; numVal numVal 1 ? 1 : numVal; $(#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 ? 1 : num; $(#bookNum).val(num); }); 好了这样就完美解决用户输入了。 当然这里仅仅说明了js的控制里面还可以加入其它控制比如最大限制库存查询服务器校验等。这里就不再赘述。 转载于:https://www.cnblogs.com/wangshengli520/p/7728396.html
