el-input-number踩坑（禁止输入）

最新推荐文章于 2025-03-05 08:49:10 发布

F N Nancy

最新推荐文章于 2025-03-05 08:49:10 发布

阅读量2.7k

点赞数 2

分类专栏：笔记 elementui 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/NancyFyn/article/details/127536793

版权

笔记同时被 2 个专栏收录

35 篇文章

订阅专栏

elementui

11 篇文章

订阅专栏

最近使用 el-input-number 计数器之前都是限制大小取值，今天想要禁止输入只使用加减号；

<el-input-number v-model="xxx" @keydown.native="channelInputLimit" @change="handleChange" :min="1" :max="10" ></el-input-number>

channelInputLimit(e) {
  e.returnValue = ''
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

F N Nancy

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue el-input 限制输入内容

林一怂儿

07-13

1075

🤔日常项目中经常遇到既要el-input的样式，又要el-input-number限制，所以需要绑定@input事件进行约束输入限制。

el-input/el-input-number在vue中优雅实现禁止输入特殊字符

weixin_44094836的博客

05-06

1668

问题描述：前端提交form表单要求el-input/el-input-number，不能输入 @#¥%……&*…… 分析问题：在事件或者方法中把字符串替代成空解决问题： 1）在mian.js中添加【vue原型上添加方法，便于全局使用】 Vue.prototype.validForbid = function (value, number = 255) { value = value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]

2 条评论您还未登录，请先登录后发表或查看评论

element的InputNumber计数器禁止输入只允许加减

树尚的博客

12-27

1315

element的InputNumber计数器禁止输入只允许加减

el-input-number作为数据显示和编辑框

最新发布

Ljj_fishhG的博客

03-05

561

文本和输入的value会显示在同一个框里

禁止type=‘number‘的input框输入字母e，input框输入非负整数，小数限制

我愿化作繁星

11-27

1845

1.例如input框为。

vue el-input/el-input-number中禁止输入表情符号

weixin_44094836的博客

05-06

893

问题描述：项目中测试提出问题，在Input输入框中输入表情后，后台会报错，于是想着在前端输入的时候禁止输入表情，或者点击win10输入法后面的表情时，禁止输入表情分析问题：一开始使用了排除法，让input只能输入数字、字母。但是测试在用不同电脑测试，联想的笔记本电脑用"window+;"还是可以输入，通过复制表情查看，发现是字母。用简单的js去除就解决不了这个问题解决问题：在main.js中加入一些代码，自定义一个清除表情的属性。首先npm install emoji-regex import emo

iView 通过render函数实现 InputNumber 的双向数据绑定，踩坑一、_render函数写el-input-number

2401_89694162的博客

12-17

144

【代码】iView 通过render函数实现 InputNumber 的双向数据绑定，踩坑一、_render函数写el-input-number。

iView 通过render函数实现 InputNumber 的双向数据绑定，踩坑二、_解决a-input-number输入变化时同步修改数据绑定

2301_82244509的博客

06-17

452

【代码】iView 通过render函数实现 InputNumber 的双向数据绑定，踩坑二、_解决a-input-number输入变化时同步修改数据绑定。

el-select框在 @change和remove-tag事件同时使用时，踩过的坑

在路上`的博客

08-05

2562

Vue 的 $nextTick 方法用于在下一个 DOM 更新周期之后执行延迟回调。在修改数据之后，可以使用 $nextTick 来等待 DOM 更新。这在需要在数据变化之后立即操作 DOM 时非常有用。在 Vue 2 中, $ nextTick 是 Vue 实例的一个方法，可以在组件内部使用 this.$nextTick 调用。methods: {// 在这里执行 DOM 操作，因为此时 DOM 已经更新});},},

Vue + elementUI使用中总结，包括踩坑（更新中）

是日前端

11-11

2767

<el-table-column prop="reportName" label="报告名称"> <template slot-scope="scope"> <el-input v-model="scope.row.reportName" @blur="confirmData" clearable></el-input> </tem

vue-cli3-element-ui 开发项目中遇到的坑以及解决方案

郝峰vip的博客

04-21

633

前言小编在开发新项目中，pc端用的是vuecli3+element-ui，移动端用的是vue-cli3+vant-ui或者vue-cli3+mint-ui，在这篇文章就把在开发pc端项目中也就是使用vuecli3+element-ui过程中遇到的坑和解决方案记录下来，方便后续自己学习。目前使用的element-ui版本是2.15.1,这里记录版本的原因是，之前用过低版本遇到的坑发现后来随着element-ui版本的更新给优化了，所以这里记录一下版本号。这篇博客会随着开发中不断地踩坑持续更新的。\

Element plus 禁止 el-input-number 输入 e

qq_30193097的博客

12-23

581

【代码】Element plus 禁止 el-input-number 输入 e。

el-input-number不能输入非数字

qq_63605379的博客

04-11

444

【代码】el-input-number不能输入非数字。

elementUi __InputNumber 计数器不允许输入,只可以加减，亲测可用

qq_49244747的博客

07-12

1597

【代码】elementUi __InputNumber 计数器不允许输入,只可以加减，亲测可用。

element的InputNumber 计数器禁止输入只允许按钮加减

dzxrbd的博客

01-01

3331

实现InputNumber 计数器只允许按钮控制，禁止输入

input设置type为number,禁止输入e等符号,去除上下箭头

zennnlee的博客

04-17

4421

【代码】input设置type为number,禁止输入e等符号,去除上下箭头。

【javascript】vue和elementui中的键盘事件，el-input-number输入框限制输入数据规则，只能输入正整数，禁止输入除正整数以外的其他字符

DecorateCC的博客

06-06

8548

keyup.native=“UpNumber” @keydown.native="UpNumber"这是一个Vue.js中的事件绑定语法，用于监听键盘按键事件。其中@keyup.native表示监听键盘松开事件，@keydown.native表示监听键盘按下事件，UpNumber是自定义的事件处理函数。首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。

element el-input type=number的时候隐藏上下箭头，并且禁止鼠标滚动改变值，禁止输入e

TodayStartWJH的博客

07-30

5427

element el-input type=number的时候隐藏上下箭头，并且禁止鼠标滚动改变值，禁止输入e

elementUI中input-number组件的坑

qq_40122602的博客

04-12

896

目前问题是输入非一百整数时会按四舍五入来纠正到最近的数值。于是尝试增加blur事件处理，但是还是会四舍五入。需求是一个输入框带加减按钮，步长为100，且输入非一百整数时，向下取整。排查下来发现要把step-strictly去掉，再增加blur。

el-input type=number 禁止输入

01-22

### 实现方案为了确保 `el-input-number` 组件仅接受数字输入并阻止其他字符（如 `e`, `E`, `+`, `-`），可以采用多种方式来处理这个问题。 #### 方法一：通过监听器过滤非法字符可以在 `input` 或者 `change` 事件中加入正则表达式的验证逻辑，从而实时清理掉不符合条件的字符[^1]。下面是一个具体的例子： ```javascript <template> <div>  <el-input-number v-model="num" @input="handleInput"></el-input-number> </div> </template> <script> export default { data() { return { num: '' }; }, methods: { handleInput(value) { // 清除非数字字符 const cleanedValue = String(value).replace(/[^0-9]/g, ''); if(cleanedValue !== value){ this.num = Number(cleanedValue); } } } }; </script> ``` 这种方法简单有效，在每次用户尝试修改数值时都会触发一次校验操作，并自动修正任何不合法的内容。 #### 方法二：利用全局函数进行预处理如果项目中有多个地方需要用到类似的限制功能，则可以通过扩展 Vue 原型链的方式创建一个通用的方法来进行统一管理[^3]。这样做的好处是可以减少重复代码量的同时也提高了维护效率。 ```javascript // main.js 中添加如下配置 Vue.prototype.validOnlyDigits = function (value) { return String(value).replace(/[^0-9]/g, ""); };  <template> <div> <el-input-number :formatter="(val)=>validOnlyDigits(val)" parser={(val)=>validOnlyDigits(val)}></el-input-number> </div> </template> ``` 这里使用了 Element Plus 提供的 `formatter` 和 `parser` 属性，它们分别用于显示前后的数据转换工作。当用户输入的数据经过这些属性传递给组件内部之前会被先做一轮清洗，确保最终保存下来的都是纯数字形式。