el-input 标签只能输入纯数字

问题描述

当我们开发项目时，常常想限制用户只能输入纯数字:

image

上图角色id只能输入纯数字, 怎么实现呢？

只需要在el-input标签添加代码,如下图所示:

image

代码如下图

<el-form-item label="角色Id*" class="redItem">

  <el-input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" size="small" width="50" v-model="editRoleParam.roleID" placeholder="请输入数字">

</el-form-item>

可以通过给input 添加onkeyup事件来实现

当输入值的键盘抬起时触发这个事件。this.value表示此输入框的值，/\D/g为正则表达式，用来匹配所有非数字字符；

此句功能为：将输入值为非数字的字符替换为空；当输入值的键盘抬起时触发这个事件。this.value表示此输入框的值，/\D/g为正则表达式，用来匹配所有非数字字符；

此句功能为：将输入值为非数字的字符替换为空；

placeholder属性是当input框为空时显示的文字提示;