element-plus解决input-number 中可以输入+ -

437 阅读1分钟

element-plus 中的 input-number 并没有对 符号“+”、“-”、“e”做出限制,因为他只是用了inputtype="number属性,所以可能还会有浏览器差异。

测试意思,业务要求只能输入数字,所以把其他过滤掉。

原HTML:

<el-input-number v-model="num" placeholder="1-100" :min="1" :max="100" />

使用change和blur事件无法获取到特殊字符,没办法过滤替换。

解决办法如下: 监听keydown事件处理

HTML:
<el-input-number v-model="num" @keydown="channelInputLimit"
placeholder="1-100" :min="1" :max="100" />

JS:
const channelInputLimit = (e) => {  
    const key = e.key;  
    const notAllowList = ['e','+','-'];  
    if (notAllowList.includes(key)) {  
    e.returnValue = false  
    return false  
    }  
    return true
};