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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
微信小程序入门之指南针
Oct 22 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
php 随机排序广告的实现代码
2011/05/09 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
php实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
快速查询Python文档方法分享
2017/12/27 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
python list格式数据excel导出方法
2018/10/31 Python
Django实现学员管理系统
2019/02/26 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
pytorch 修改预训练model实例
2020/01/18 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
实习教师自我鉴定
2013/12/09 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
货车司机岗位职责
2014/03/18 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技