el-input数字类型禁止+-符号输入

Lyuing2025-11-12 17:45

使用 el-input 的数字类型输入时，会默认开放-，+，e符号输入，且无法通过onInput进行拦截。

html 复制代码

<el-input
    v-model="input"
    type="number"
    placeholder="请输入内容"
    @input="onInput"
></el-input>

js 复制代码

function onInput (value) {
    const val = value.toString().replace(/[^\d/.]/g, '');
    input.value = val
}

以上方法无法正确响应，原因有二：

number类型将 -，+，e 识别为数字符号，不做限制，且符号的输入不会精确触发input响应；
首次接收到 -，+，e 输入后，返回剔除掉的文本回显，无法正确显示，原生input会内部转义，导致无法即显。

方案

可监听原生input方法，即可规避问题1；回显赋值时，同时更改原生input的value值，即可。需要注意的是，该方案依赖Event中的属性data，对于兼容性要求高的场景，需谨慎处理。

html 复制代码

<el-input
    v-model="input"
    type="number"
    placeholder="请输入内容"
    @input.native="onInput"
></el-input>

js 复制代码

function onInput (e) {
    const target = e.target;
    const value = target.value;
  
    if( [ '-', '+', 'e' ].includes(e.data) ) {
        target.value = offset.value[key] + '';
    }
    const val = value.toString().replace(/[^\d/.]/g, '');
    input.value = val
}