位置: 编程技术 - 正文
JavaScript实现仿淘宝商品购买数量的增减效果(js模拟new)
编辑：rootadmin推荐整理分享JavaScript实现仿淘宝商品购买数量的增减效果(js模拟new)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js 仿真,javascript模拟登录,js实现fizzbuzz,js 仿真,javascript可以模拟动画吗,javascript可以模拟动画吗,js 仿真,js实现v-model,内容如对您有帮助，希望把文章链接给更多的朋友！
近期在开发一个地方O2O租书项目，使用ASP.NET MVC技术，其中在图书详情页，用户可以输入借阅的数量，这里使用了js来控制数量的增减和校验。
1.数量一定是数字
2.点击增减按钮的时候要能自动加1或减1
3.用户输入的内容如果是非数字，则不能输入(退格键除外)
4.用户输入的值最小为1
5.输入框离开焦点时要检查取值范围，确保输入框中必须是范围内的数字
基本就是以上几点
效果如下：
以下是Html代码
首先看第一条：
输入一定是数字
这很容易想到用keyup事件监测，用正则表达式替换非数字字符
这样就可以保证用户输入的一定是数字了，并且我们中间做了校验，如果使用parseInt转换为整数后值是NaN，就让值为1 ，但是我们会发现一个现象，就是用户如果想清空里面的值输入的时候，发现里面的值总是会变成1
这是不合理的，并且体验也不好，在输入非数字的时候，会先显示那个字符，然后被替换掉。
再观察一下当当网，京东这些网站，当输入非数字时，输入框根本就不会有任何动静，退格后 还能随意输入数字。经研究发现，他们使用了监控键盘的方法，拦截输入。
经过改进后：
这样我们保证了在用户使用取消回车(0)，退格(8)，左右箭头( )和数字时 正常输入，其他按键就统统失效了。这样就能保证输入的内容是数字了。
但是还有一个问题，用户使用退格键将内容清空后，用户没有输入的时候，值为空
这就要使用keyup和blur事件来弥补了
这样就能保证用户在输入数字的时候的校验。
使用按钮控制就更容易了：
好了，这样就完美解决用户输入了。
当然，这里仅仅说明了js的控制，里面还可以加入其它控制，比如最大限制，库存查询，服务器校验等。这里就不再赘述。
很全面的JavaScript常用功能汇总集合 本文主要总结了JavaScript常用功能总结，如一些常用的额JS对象，基本数据结构，功能函数等，还有一些常用的设计模式。目录：众所周知，JavaScript是动
在JavaScript中call()与apply()区别 如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.
鼠标悬停小图标显示大图标 页面元素为div-table-tr-td，对于td中的图片，鼠标悬停上则显示大图片，鼠标离开则大图片消失：首先需要知道jq创建dom元素语法；$(html标签)，例如这里创
标签: js模拟new
本文链接地址:https://www.jiuchutong.com/biancheng/382749.html 转载请保留说明！上一篇：JavaScript学习笔记整理之引用类型(javascript要怎么学)
下一篇：很全面的JavaScript常用功能汇总集合(很全面的成语)
