vue3知识点3购物车案例 js/vue中input框只输入正整数的最简写做法

前言

在用vue的时候需要做一个商品列表，商品的数量要求是数字（我们都知道指定number），还要求是正整数。

我我的做法是加上min=“0”，max，确保正数，step指定为1，,确保整数，但是我们在input框手动输入仍然能输入小数，负数，甚至能输入+和-，表达式。这时我们好像就只能者给它绑定一个函数，大概率都是用onchange绑定再写正则或者其他的js方法解决。

以前我一直是这么写的,给number框绑定函数再写正则逻辑，写一次忘一次，但是最近我发现input自带的事件就能解决这个问题。

输入正整数做法：

1.number框+min=“0”+max=“10000”

以上述为例，数量肯定是是一个number框，text会出现文字。后续计算NaN.

并且number必须是正整数，不能是负数或小数，min=“0” 最小是0，保证正数 ，step="1"每次前进1，整数的意思。

在实际应用中最好指定个最大值，保证不超过库存量。

假如这里库存量是个变量，x在vue中max就指定它的库存量那个变量。

 <td><input type="number" min="0" max="1000">td>

保证number框它自己是正整数了，但是手动输入还是可以输入负数和小数和加减号。

所以如何限制手动输入的字符呢？

2.oninput事件

利用oninput事件，input的value值改变立即触发，随着改变随时触发，不像onchange是失去焦点后触发。

我们可以给它设置输入的最大值和最小值。

注意：oninput的value是事件自带的，它值的就是input的value值，不用自己获取，直接这样写即可。

在vue中不用改成遍历后item，index in obj, 的obj.item。同时也要注意不要有变量名是value。这个我没试。

<input type="number" min="0" max="1000"
       oninput="if (value < 0) value = 0;if(value>1000)value=1000"
 >

3. onkeypress事件

键盘输入改变。

手动输入的最大值最小值限制后，还需要限制框内只能输入正整数的数字，不能输入特殊字符±小数点，不能输小数等。

也就是说我们在键盘上每输入一个都必须保证它是数字，这时我们想到charCode表。表中数字是哪些嘞？

charcode中只有48到57是数字，我们让它直接返回表中48-57的数字即可。

number框正整数全部应用代码

<input type="number" min="0