Question

我有这个代码（输入字段），我应该只允许用户输入数字但仍接受字符。

isNumber: function(evt) {
        console.log('Im in')
        evt = (evt) ? evt : window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
            evt.preventDefault();;
        } else {
            return true;
        }

    },

这只会影响或删除字段中的字符，如果悬停到另一个字段。所以我已经添加了这个方法来验证，但没有执行它。

v-on:keypress="isNumber(event)"

我错过了什么吗？

更新

这个现在可以在Jacob的答案的帮助下工作（将v-on:keydown="isNumber"替换为{{1}}，但是现在我的问题是，如果我将键盘切换为日语，它现在再次接受字符。：S：S知道怎么做（限制日文字符）吗？

Answer 1

问题1 :(如果您使用的是Keen UI）Keen UI文本框元素不支持keypress事件

https://josephuspaye.github.io/Keen-UI/#/ui-textbox

问题2：event中的isNumber(event)是不必要的。只需isNumber即可。（在需要传递事件的情况下，正确的语法是isNumber($event)）

建议你：

将v-on:keypress="isNumber(event)"更改为v-on:keydown="isNumber"

更新：改进isNumber功能。再添加1个验证，以使用isNaN检查密钥是否为数字。请参阅下面的isNaN(evt.key)

methods: {
    isNumber: function(evt) {
        console.log("Im in");
        evt = evt ? evt : window.event;
        var charCode = evt.which ? evt.which : evt.keyCode;
        if (
            charCode > 31 &&
            (charCode < 48 || charCode > 57) &&
            charCode !== 46
        ) {
            evt.preventDefault();
        } else if(isNaN(evt.key)){
            evt.preventDefault();
        } else {
            return true;
        }
    }
}

Answer 2

您是否尝试过添加type =＆＃34; number＆＃34;？

这样：

<div class="flexItem">
     <ui-textbox label="test" v-model="prospect.monthly_cost"
         name="testmonth"
         v-validate="`${vRequired}|decimal`"
         v-on:keypress="isNumber(event)"
         :invalid="errors.has('monthly_cost')"
         :error="errors.first('monthly_cost')"
         type="number"
     ></ui-textbox>
</div>

Vue.js输入字段仍然接受字符输入

2 个答案: