JavaScript实现仿淘宝商品购买数量的增减效果


Posted in Javascript onJanuary 22, 2016

近期在开发一个地方O2O租书项目,使用ASP.NET MVC技术,其中在图书详情页,用户可以输入借阅的数量,这里使用了js来控制数量的增减和校验。

1.数量一定是数字

2.点击增减按钮的时候要能自动加1或减1

3.用户输入的内容如果是非数字,则不能输入(退格键除外)

4.用户输入的值最小为1

5.输入框离开焦点时要检查取值范围,确保输入框中必须是范围内的数字

基本就是以上几点

效果如下:

JavaScript实现仿淘宝商品购买数量的增减效果

以下是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 < ? : numVal;
$(this).val(numVal);
});

这样就可以保证用户输入的一定是数字了,并且我们中间做了校验,如果使用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的控制,里面还可以加入其它控制,比如最大限制,库存查询,服务器校验等。这里就不再赘述。

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
jquery退出each循环的写法
Feb 26 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
简单理解JavaScript中的封装与继承特性
Mar 19 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
解决vue组件props传值对象获取不到的问题
Jun 06 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 #Javascript
JavaScript学习笔记整理之引用类型
Jan 22 #Javascript
jQuery弹层插件jquery.fancybox.js用法实例
Jan 22 #Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 #Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 #Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 #Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 #Javascript
You might like
Terran兵种介绍
2020/03/14 星际争霸
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
PHP请求远程地址设置超时时间的解决方法
2016/10/29 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
jQuery实现的简单图片轮播效果完整示例
2018/02/08 jQuery
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
python使用循环实现批量创建文件夹示例
2014/03/25 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python多进程fork()函数详解
2019/02/22 Python
python实现远程控制电脑
2019/05/23 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
书法培训心得体会
2014/01/05 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
自强之星事迹材料
2014/05/12 职场文书
迎新生标语大全
2014/10/06 职场文书
萤火虫之墓观后感
2015/06/05 职场文书