vue实现input框只能输入正整数

vue实现input框只能输入正整数,第1张

1、起初选择使用keyup解决

<el-input   style="width:50px"  v-model="skuPc.effectiveTime"  @keyup.native="number($event)"></el-input>

methods:{

        笑晌number(e) {

              console.log(e.target.value)

         大或     let  flag = new RegExp("^[1-9]([0-9])*$").test(e.target.value)

              console.log(flag)

              if (!flag) {

                        this.$message({

                                  showClose: true,

                                  message: "请输入正整数",

                                  type: "warning"

                        })

              }

    }

为什么el-input要用@keyup.native?因为el-input是封装的组件,没有原生的keyup事件,如果换作input标签,可直接使用@keyup。

这样可以实现输入非正整数时的内容时实时提示,但是由于是keyup事件,会导致好几个message提示信息同时出现在页面上吗,不太友好。

2、换种事件,使用@blur

<el-input  style="width:50px"  v-model="skuPc.effectiveTime" @blur="number($event)"><el-input>

这样只有在输入框失焦时候提示错误信息,符合有好的用户体验要求碰仿锋。

项目需岩汪高求el-input组件输入的时候使用 v-model.number="value" 一开始可以输入任何字符。除非第一次输入为数字,后陵早面输入粗尺的内容才会被限制,只能输入数字。这个并不符合需求。

我们要实现如下功能:


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11967169.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存