如何正确设置Vue中输入框仅允许输入数字？

本文共计1836个文字，预计阅读时间需要8分钟。

最近遇到一个需求，需要限制文本框输入数字。但数字类型的输入框有箭头，个人不太喜欢，想找其他方式实现。想过网上找个现成的插件，但百度、谷歌一搜索都没有现成的。

最近遇到一个需求，需要限制文本框输入数字，而number类型的输入框有箭头，个人不是很喜欢，因此想要寻求其它途径实现。本想通过网上找个现成的插件，然而百度，谷歌一番都没有找到满意的答案，至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手，丰衣足食。

事件选型

首先我们很容易想到通过事件来达到目的，大致可以通过以下几个事件来实现：

• keypress/keydown

思路：按键按下的时候触发，通过判断按下的是否是数字返回true/false来限制用户的输入。
缺点：无法限制用户复制粘贴的数据。

• keyup

思路：同keypress事件，区别在于按键摁下弹起的时候触发。
缺点：从界面上看有个回退（显示用户输入的 不合法字符之后删除回退）的现象，不是很自然。

• input

思路：用户输入的时候触发
优点：可以在用户复制粘贴的时候获取到完整的值，同时不会有界面回退的现象。

初步实现

综合各种方案的优缺点，选定input事件来实现，首先我们来实现最简单的限制用户只能输入正整数。