脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js商品数量的增减

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

 更新时间：2016年01月22日 09:59:02   作者：史林枫  
最近接了个项目，要开发一个地方的O2O租书项目，使用的是asp.net mvc技术，其中咋图书详情页，用户可以输入借阅的数量，器实现此功能的方法是使用了js来控制数量的增减和校验，对js实现商品数量的增减功能感兴趣的朋友一起学习吧

近期在开发一个地方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 < ? : 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实战之带收放动画效果的导航菜单

    JavaScript实战之带收放动画效果的导航菜单

    这篇文章主要为大家详细介绍了JavaScript实战之带收放动画效果的导航菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript高级程序设计 读书笔记之九 本地对象Array

    JavaScript高级程序设计 读书笔记之九 本地对象Array

    本地对象Array，数组等操作函数
    2012-02-02
  • JavaScript Class类实例讲解

    JavaScript Class类实例讲解

    ES6提供了更接近面向对象(注意:javascript本质上是基于对象的语言)语言的写法,引入了Class(类)这个概念,作为对象的模板,下面这篇文章主要给大家介绍了关于JavaScript ES6中class定义类的相关资料,需要的朋友可以参考下
    2022-11-11
  • js实现带圆角的两级导航菜单效果代码

    js实现带圆角的两级导航菜单效果代码

    这篇文章主要介绍了js实现带圆角的两级导航菜单效果代码,涉及javascript鼠标事件及页面元素样式动态变换技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • js实现的八点拖动修改div大小的代码

    js实现的八点拖动修改div大小的代码

    八点改变div大小的实现代码，代码相对来说并不多，需要的朋友可以参考下。
    2010-02-02
  • 微信小程序实现左滑动删除效果

    微信小程序实现左滑动删除效果

    这篇文章主要为大家详细介绍了微信小程序实现左滑动删除效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • BootStrapValidator初使用教程详解

    BootStrapValidator初使用教程详解

    bootstrap能够增加兼容性的强大框架,在项目中用到了数据验证功能，今天小编就抽空给大家介绍下BootStrapValidator初使用教程详解，一起看看吧
    2017-02-02
  • 浅谈JavaScript 数据属性和访问器属性

    浅谈JavaScript 数据属性和访问器属性

    下面小编就为大家带来一篇浅谈JavaScript 数据属性和访问器属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • 使用layui的layer组件做弹出层的例子

    使用layui的layer组件做弹出层的例子

    今天小编就为大家分享一篇使用layui的layer组件做弹出层的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js实现简易计数器功能

    js实现简易计数器功能

    这篇文章主要为大家详细介绍了js实现计数器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论