javascript - vue 移动端的input 数字输入优化

问题描述

这是移动端使用的， input type 为number 时 英文或中文都没有限制，而且maxlength不起作用，input type 为tel 时 英文或中文也都没有限制，但maxlength有作用，所以用tel，keyup 是为了过滤数字以外的字符。请问大神这段代码还有没有优化的空间？

<input v-model='phoneNumber' placeholder='输入手机号' type='tel' maxlength='11' @keyup='handleFilterLetters'><script type='text/javascript'> vm = new Vue({ el: '#app', data: {phoneNumber: null, }, methods: {handleFilterLetters: function(){ var self = this; self.phoneNumber=self.phoneNumber.replace(/[^d]/g,’’);}, }})</script>

问题解答

phoneNumber 初始值应该是字符串的 ’’，否则对一个可能为 null 的变量调用 replace 是不安全的。

var self = this 是不必要的。

handleFilterLetters 好长啊，改成 onKeyUp 不好读一点吗（

<input> 一行写的太长了，eslint-airbnb 的规则是

<input v-model='phoneNumber' placeholder='输入手机号' type='tel' maxlength='11' @keyup='handleFilterLetters'/>回答2：

楼上说的都对题主还可以多注意一下 code style 比如：self.phoneNumber=self.phoneNumber.replace(/[^d]/g,’’);

写成self.phoneNumber = self.phoneNumber.replace(/[^d]/g,’’);

比较好

这里用的局部filter

如果想可复用程度高点，全局filter也可以的

<p > <input :value='phone | num' @keyup='phoneChange' /></p>

var app = new Vue({ el: '#app', data: { phone: '' }, methods: { phoneChange(e) { this.phone = e.target.value this.$forceUpdate() // 这里必须有 } }, filters: { ’num’: function(value) { return value.replace(/[^d]/g, ’’) } }})