vue如何限制文本框输入数字


这篇文章主要介绍了vue如何限制文本框输入数字的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue如何限制文本框输入数字文章都会有所收获,下面我们一起来看看吧。事件选型
首先我们很容易想到通过事件来达到目的,大致可以通过以下几个事件来实现:keypress/keydown思路:按键按下的时候触发,通过判断按下的是否是数字返回true/false来限制用户的输入。
缺点:无法限制用户复制粘贴的数据。keyup思路:同keypress事件,区别在于按键摁下弹起的时候触发。
缺点:从界面上看有个回退(显示用户输入的 不合法字符之后删除回退)的现象,不是很自然。input思路:用户输入的时候触发
优点:可以在用户复制粘贴的时候获取到完整的值,同时不会有界面回退的现象。
初步实现
综合各种方案的优缺点,选定inp免费云主机域名ut事件来实现,首先我们来实现最简单的限制用户只能输入正整数。代码如下:但是,此方法有的时候没有很好地达到预期效果,这边我放到最后再来讲。封装成指令
通过自定义指令来增加相应DOM的特性,使其支持文本输入限制。使用方法:支持浮点数
我们知道v-model指令有三种修饰符lazy, number, trim实现了不同的功能,这边呢,也想通过v-number-input.float的方式达到支持浮点数的目的 。
修改handle回调,增加浮点数的支持使用方法:支持小数保留位最大位数限制
查阅官方文档可知,指令支持参数的传递,这边我们期望通过参数传递小数点保留位数的配置使用方法:支持负数
对正则稍加修改,只保留开头的负号,使其支持负数支持输入的最大值和最小值的限制
指令的参数支持对象的传递,因此这边我们通过对象的字段配置最大数和最小值的配置。定义如下:
使用方法:至此我们的功能已经实现得差不多了,上述代码已经足以应对我们的大多数的需求了。但在我发现某些场景下有的时候键入非数字时,表单验证获取的数值仍然是我键入的字符而非空值,导致非空验证不正确。但是这种情况并非必现的,我猜想可能是因为是vue的model数据未同步导致的,因此在上述回调函数添加上以下代码,手动触发数据的双向绑定。关于“vue如何限制文本框输入数字”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue如何限制文本框输入数字”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注百云主机行业资讯频道。

相关推荐: 怎么用C语言代码求大数的阶乘

本篇内容主要讲解“怎么用C语言代码求大数的阶乘”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用C语言代码求大数的阶乘”吧!首先定义一个函数用来将运算结果存入数组完成需要使用的函数构建后,定义主函数和需要的变量及…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

Like (0)
Donate 微信扫一扫 微信扫一扫
Previous 02/14 20:40
Next 02/14 20:40

相关推荐