elementui中的el-input-number只能输入数字

最新推荐文章于 2024-09-27 10:08:28 发布

素雪玉

最新推荐文章于 2024-09-27 10:08:28 发布

阅读量4.7k

点赞数 5

分类专栏：前端 vue elementui 文章标签： vue.js 前端框架

本文链接：https://blog.csdn.net/loverlanxin/article/details/121518301

版权

vue 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

elementui

1 篇文章 0 订阅

订阅专栏

该博客主要讨论了在火狐浏览器中，如何确保`el-input-number`组件只能接受数字输入的问题。作者尝试了使用`onKeypress`事件过滤非数字字符的方法，但发现仍能在输入框中输入非数字文字。为解决此问题，作者添加了`@input.native`事件，并在事件处理函数中通过正则表达式替换掉非数字字符，同时限制输入值不超过99。通过这种方法，成功地阻止了在火狐中输入非数字内容。

摘要由CSDN通过智能技术生成

需求是只能输入数字，输入框中不能有除数字外的文字

查询资料发现都说加这段代码

onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"

但是在火狐中输入框中仍然能输入除数字外的文字，

给el-input-number加input事件，因为是组件所以是@input.native：

<el-input-number
  v-model="num"
  onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" 
  @blur="inputBlur"
  @input.native="onInput"
  :min="1"
  :max="99"
  label="描述文字"
></el-input-number>

  onInput(e) {
       console.log(e.target.value,"yjm")
       e.target.value=e.target.value.replace(/[^\d.]/g,'');
        if(parseInt(e.target.value)>99){
         e.target.value=99
       }
    },

问题解决