如何正确设置Vue中输入框仅允许输入数字?
- 内容介绍
- 文章标签
- 相关推荐
本文共计1836个文字,预计阅读时间需要8分钟。
最近遇到一个需求,需要限制文本框输入数字。但数字类型的输入框有箭头,个人不太喜欢,想找其他方式实现。想过网上找个现成的插件,但百度、谷歌一搜索都没有现成的。
最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现。本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手,丰衣足食。
事件选型
首先我们很容易想到通过事件来达到目的,大致可以通过以下几个事件来实现:
- keypress/keydown
思路:按键按下的时候触发,通过判断按下的是否是数字返回true/false来限制用户的输入。
缺点:无法限制用户复制粘贴的数据。
- keyup
思路:同keypress事件,区别在于按键摁下弹起的时候触发。
缺点:从界面上看有个回退(显示用户输入的 不合法字符之后删除回退)的现象,不是很自然。
- input
思路:用户输入的时候触发
优点:可以在用户复制粘贴的时候获取到完整的值,同时不会有界面回退的现象。
初步实现
综合各种方案的优缺点,选定input事件来实现,首先我们来实现最简单的限制用户只能输入正整数。
本文共计1836个文字,预计阅读时间需要8分钟。
最近遇到一个需求,需要限制文本框输入数字。但数字类型的输入框有箭头,个人不太喜欢,想找其他方式实现。想过网上找个现成的插件,但百度、谷歌一搜索都没有现成的。
最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现。本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手,丰衣足食。
事件选型
首先我们很容易想到通过事件来达到目的,大致可以通过以下几个事件来实现:
- keypress/keydown
思路:按键按下的时候触发,通过判断按下的是否是数字返回true/false来限制用户的输入。
缺点:无法限制用户复制粘贴的数据。
- keyup
思路:同keypress事件,区别在于按键摁下弹起的时候触发。
缺点:从界面上看有个回退(显示用户输入的 不合法字符之后删除回退)的现象,不是很自然。
- input
思路:用户输入的时候触发
优点:可以在用户复制粘贴的时候获取到完整的值,同时不会有界面回退的现象。
初步实现
综合各种方案的优缺点,选定input事件来实现,首先我们来实现最简单的限制用户只能输入正整数。

