VueJS/iView的Input输入框限制只能输入数字(或完全自定义限制)

2022-04-20 876点热度 0人点赞 0条评论

iView中的Input输入框虽然可以限制type="number",限制只能输入数字(任能输入小数点、+/-号),但是不能满足如下需求:

仅限制输入数字(整数)或者不带小数点,等其他随意限制的情况;另外希望VueJS原生的input也能限制自定义的输入。

实现

我们可以利用@on-keydown监听键盘输入的内容(keyCode),给需要能输入的内容加入白名单,不在白名单中的字符使用event.returnValue = false; 来达到不允许输入目的。

Html代码如下:

<i-input v-model="studentNum" class="my-input1" @on-keydown="checkMyInput1" type="number" style="width: 250px;" :maxlength="50">
    <span slot="prepend" class="red-star">学生</span>
    <span slot="append">人</span>
</i-input>

或者原生的情况:

<i-input v-model="studentNum" @on-keydown="checkMyInput1">
</i-input>

实现限制输入(白名单检测的JS)

checkMyInput1: function (event) {
    var allowedKeyCodes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57]; // 0-9键
    allowedKeyCodes.push(8); // 返回键、删除键
    // allowedKeyCodes.push(46); // 小数点
    // allowedKeyCodes.push(45); // 负数-符号
    if (allowedKeyCodes.indexOf(event.keyCode) < 0) {
        event.returnValue = false;
        // 如果有需要加进去允许的keycode,放到allowedKeyCodes里面去
        console.warn('keyCode: ' + event.keyCode + ", not allowed")
    }
}

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论