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>

解决方案

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

2. var self = this 是不必要的。

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

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

<input
  v-model="phoneNumber"
  placeholder="输入手机号"
  type="tel"
  maxlength="11"
  @keyup="handleFilterLetters"
/>

这篇关于javascript - vue 移动端的input 数字输入优化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！