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

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")
    }
}