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

<el-input
    v-model="input"
    type="number"
    placeholder="请输入内容"
    @input="onInput"
></el-input>
function onInput (value) {
    const val = value.toString().replace(/[^d/.]/g, '');
    input.value = val
}

以上方法无法正确响应,原因有二:

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

方案

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

<el-input
    v-model="input"
    type="number"
    placeholder="请输入内容"
    @input.native="onInput"
></el-input>
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
}
本站提供的所有下载资源均来自互联网,仅提供学习交流使用,版权归原作者所有。如需商业使用,请联系原作者获得授权。 如您发现有涉嫌侵权的内容,请联系我们 邮箱:[email protected]