最近开发了本地O2O图书租赁项目，采用了ASP.NET MVC技术。在图书详细信息页面，用户可以输入借阅图书的数量，这里使用js来控制数量的增加、减少和检查。

1.数量必须是一个数字。

2.单击增加/减少按钮自动增加1或减少1。

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

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

5.当输入框离开焦点时，检查值范围以确保输入框必须是该范围内的数字。

基本就是以上几点。

效果如下：

以下是Html代码。

div class=' bookNum ' a id=' sub ' href=' JavaScript : void(0)；-/ain put type=' text ' value=' 1 ' id=' bookNum ' a id=' add ' href=' JavaScript : void(0)；'/aa href=' JavaScript : void(0)；'Id='addCart '加入借阅台/adiv class='clear'/div/div首先看第一项：

输入必须是数字。

很容易想到使用键盘事件监控并用正则表达式替换非数字字符。

$('#bookNum ')。keyup(function(){ var regex=/[^d]*/g；var numVal=$(this)。val()；numVal=numVal.replace(regex，' ')；NumVal=ParSeint(NumVal)| |；numVal=numVal？ numVal$(这个)。val(NumVal)；});这样就可以保证用户输入的一定是一个数字，中间我们已经检查过了。如果值被parseInt转换成整数后是NaN，让值为1，但是我们会发现一个现象，那就是如果用户想清空里面的值，输入20，它总是会变成1。

这不合理，体验也不好。当输入非数字时，字符将首先显示，然后被替换。

看看Dangdang.com和JD.COM。输入非数字时，输入框根本不会有任何移动，退格后可以随意输入数字。经过研究，发现他们用监控键盘的方法截取输入。

改进后：

$('#bookNum ')。按键(函数(b) {var keyCode=b.keyCode？b . KeyCode : b . charCode；如果(键码！=0(键码48 ||键码57)键码！=8键码！=37键码！=39){返回false} else { return true}})这样，我们保证了用户使用取消回车(0)、退格(8)、左右箭头(37 39)和数字时的正常输入，其他所有按键都将无效。这样就可以保证输入的内容是数字。

然而，还有另一个问题。用户使用退格键清空内容后，当用户不输入时，该值为空。

这将通过抠像和模糊事件来补救。

$('#bookNum ')。按键(函数(b) {var keyCode=b.keyCode？b . KeyCode : b . charCode；如果(键码！=0(键码48 ||键码57)键码！=8键码！=37键码！=39){返回false} else { return true}}).keyup(函数(e) {var keyCode=e.keyCode？e . KeyCode : e . CharCode；console.log(键码)；如果(键码！=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(){ varnum=par sent($(' # booknum '))。val())| | 0；$('#bookNum ')。val(num 1)；});//减去$ ('# sub ')。click(function(){ varnum=par sent($(' # booknum '))。val())| | 0；num=num-1；num=num 1？1 : num$('#bookNum ')。val(num)；});好的，这是用户输入的完美解决方案。

当然这里只描述js控件，可以添加其他控件，比如最大限额、库存查询、服务器验证等。我在这里不再重复。