vue限制文本框输入

357 阅读1分钟

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

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

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

input 思路:用户输入的时候触发 优点:可以在用户复制粘贴的时候获取到完整的值,同时不会有界面回退的现象。 初步实现 综合各种方案的优缺点,选定input事件来实现,首先我们来实现最简单的限制用户只能输入正整数。代码如下:

1