简单实现手机号银行卡的同步显示功能

简单实现手机号银行卡的同步显示功能

这是某盟的一道面试题
难道不都是只要有了清晰的思路后边写边优化么
当时我就说了思路用计算属性根据输入框的内容计算出预览框的值
处理focus和blur事件即可
非要手写，手写根本写不出啊，然后面试官就认为我不会 无语了

要求如下

1. 输入框输入内容数据长度大于0，展示出预览信息
2. 光标离开关闭预览信息
3. 预览信息每隔4位插入一个特殊字符_,输入内容不变

就是用计算属性判断即可

<template lang="html">
  <div class="zInput">
      <div class="big-show" v-show="showBig">{{txt2}}</div>
      <input type="text"
             @blur="handerBlur"
             @focus="handerFocus"
             v-model="txt">
  </div>
</template>

<script>
export default {
    name: 'z-input',
    data () {
        return {
            txt: '',
            showBig: false,
        }
    },
    computed: {
        txt2: function () {
            if (this.txt.length > 0) {
                this.showBig = true
            }
            return this.getStr(this.txt, 4)
        }
    },
    methods: {
        handerBlur () {
            this.showBig = false
        },
        handerFocus (evt) {
            if (evt.target.value.length > 0) {
                this.showBig = true
            }
        },
        getStr (str, len) {
            let lenth = str.length
            let len1 = len - 1
            let newStr = ''
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + '_'
                } else {
                    newStr += str.charAt(i)
                }
            }
            if (newStr.length % (len + 1) === 0) {
                // 解决最后一位为补充项问题
                newStr = newStr.substr(0, newStr.length - 1)
            }
            return newStr
        },
    }
}
</script>

<style lang="less">
.zInput{
    position: relative;
    .big-show {
        position: absolute;
        top: -40px;
        font-size: 36px;
        line-height: 40px;
        background-color: red;
    }
}
.zInput{
    top:50px;
}
</style>

如果再加入个长度限制，则以上方法就不合适了,更换实现方案
v-model其实是个语法糖
分开写为v-bind:value和v-on:input

<template lang="html">
  <div class="zInput">
      <div class="big-show" v-show="showBig">{{txt2}}</div>
      <input type="text"
             @blur="handerBlur"
             @focus="handerFocus"
             v-bind:value="txt"
             v-on:input="handerInput">
  </div>
</template>

<script>
export default {
    name: 'z-input',
    data () {
        return {
            txt: '',
            txt2: '',
            showBig: false,
        }
    },
    methods: {
        handerInput (evt) {
            let val = evt.target.value.substr(0, 13)
            // 限制长度13位
            this.txt = val
            evt.target.value = val
            if (this.txt.length > 0) {
                this.showBig = true
            }
            this.txt2 = this.getStr(this.txt, 4)
        },
        handerBlur () {
            this.showBig = false
        },
        handerFocus (evt) {
            if (evt.target.value.length > 0) {
                this.showBig = true
            }
        },
        getStr (str, len) {
            let lenth = str.length
            let len1 = len - 1
            let newStr = ''
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + '_'
                } else {
                    newStr += str.charAt(i)
                }
            }
            if (newStr.length % (len + 1) === 0) {
                // 解决最后一位为补充项问题
                newStr = newStr.substr(0, newStr.length - 1)
            }
            return newStr
        },
    }
}
</script>

限制只能输入数字
首先想到的是在keyup时把非数字过滤掉
但是事实是先执行keydown->handerInput->keyup

那就在keydown时处理呗，但是keydown修改evt.target.value后
在handerInput取到的evt.target.value依旧是未处理的所以说在keydown处理不起作用
必须要在handerInput时处理

```<input type="text" @blur="handerBlur" @focus="handerFocus" @keyup="handerKeyup" @keydown="handerKeydown" v-bind:value="txt" v-on:input="handerInput"> <script> handerKeydown (evt) { console.log('handerKeydown') evt.target.value = evt.target.value.replace(/[^d]/g, '') // 这里修改不起作用 }, handerKeyup (evt) { console.log('keyup') evt.target.value = evt.target.value.replace(/[^d]/g, '') // 这里执行顺序靠后 修改无用 }, handerInput (evt) { let val = evt.target.value.substr(0, 13).replace(/[^d]/g, '') console.log('handerInput__val', val) //这里拿到的val是纯数字 evt.target.value = val this.txt = val if (this.txt.length > 0) { this.showBig = true } this.txt2 = this.getStr(this.txt, 4) }, </script>

                
原文地址：https://segmentfault.com/a/1190000014083071