vue中限制一个input框只允许输入数字的简单demo

最新推荐文章于 2024-07-31 09:38:11 发布

公有云私有云

最新推荐文章于 2024-07-31 09:38:11 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/qq_39579242/article/details/97375583

版权

1.来个输入框，用的是ElementUi 组件

<el-input type='number' maxlength='2' @keydown.native='onlyNum' style='width: 40px' size='small' v-model.number='num' @change='validNum'></el-input>

onlyNum(event) {
    if(!((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || (event.keyCode === 8))) {
        // 防止浏览器默认行为（w3c）
        if(event && event.preventDefault) {
            event.preventDefault();
        }
        // IE中组织浏览器行为
        else {
            window.event.returnValue = false;
        }
    }
}

validNum() {
    // 这里面可以对num数据做进一步的处理。。。。
}