element-ui 限制输入数字类型

最新推荐文章于 2023-02-02 09:53:08 发布

WangQing2508

最新推荐文章于 2023-02-02 09:53:08 发布

阅读量275

点赞数

分类专栏：前端javaScript 文章标签： vue elementui 前端

本文链接：https://blog.csdn.net/WangQing2508/article/details/119780875

版权

前端javaScript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

"本文介绍了如何使用`el-input`组件限制用户输入的字符长度，通过`@input.native`监听输入事件实现超过长度限制时截取输入，并利用`onKeypress`事件过滤非法字符，确保只能输入数字。同时，为了去除`type="number"`的上下箭头，应用了CSS样式。此解决方案适用于前端表单中对数字输入有特定要求的场景。"

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

//input事件解决限制长度的问题，onKeypress解决可以输入字母e的问题
<el-input
        type="number"
        v-model="form.pub_num"
        @input.native="changeNum"
        onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" 
        maxlength="999999">
</el-input>

changeNum() {
      if (this.form.pub_num.length > 6) {
        this.form.pub_num = this.form.pub_num.slice(0, 6);
      }
},

/*去掉type为number的箭头*/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

input[type="number"] {
	-moz-appearance: textfield;
}