이 글은 휴대폰 번호와 은행카드의 동기화 표시 기능의 간단한 구현에 대해 공유하기 위한 것입니다. 관심 있는 친구들은 한 번 살펴보세요

휴대폰 번호와 은행 카드의 동기화 표시 기능의 간단한 구현

이건 모 동맹 인터뷰 질문
글을 쓰면서 명확한 아이디어를 가지고 그것을 최적화하는 것이 전부 아닌가요?
그때 미리보기 상자의 가치를 계산하기 위해 계산된 속성을 사용하는 것이 아이디어라고 말했습니다.
포커스와 블러 이벤트만 처리하면 됩니다.
손으로 써야 하는데, 그러면 면접관이 말문이 막힐 거라 생각합니다.

요구사항 은 다음과 같습니다

입력창에 입력된 내용의 길이가 0보다 크고 미리보기 정보가 표시됩니다
커서가 나가고 닫힙니다 미리보기 정보
4자리마다 특수문자_를 삽입하세요 미리보기 정보에 입력 내용은 그대로 유지

계산된 속성으로 판단하시면 됩니다

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

<script>
export default {
    name: &#39;z-input&#39;,
    data () {
        return {
            txt: &#39;&#39;,
            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 = &#39;&#39;
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + &#39;_&#39;
                } 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< /code>는 실제로 <code>v-bind:value 및 v-on:inputv-model其实是个语法糖
分开写为v-bind:value和v-on:input

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

<script>
export default {
    name: &#39;z-input&#39;,
    data () {
        return {
            txt: &#39;&#39;,
            txt2: &#39;&#39;,
            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 = &#39;&#39;
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + &#39;_&#39;
                } 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(&#39;handerKeydown&#39;)
           evt.target.value = evt.target.value.replace(/[^\d]/g, &#39;&#39;)
           // 这里修改不起作用
       },
       handerKeyup (evt) {
           console.log(&#39;keyup&#39;)
           evt.target.value = evt.target.value.replace(/[^\d]/g, &#39;&#39;)
           // 这里执行顺序靠后 修改无用
       },
       handerInput (evt) {
           let val = evt.target.value.substr(0, 13).replace(/[^\d]/g, &#39;&#39;)
           console.log(&#39;handerInput__val&#39;, 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>

로그인 후 복사

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

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

要求如下

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

就是用计算属性判断即可

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

<script>
export default {
    name: &#39;z-input&#39;,
    data () {
        return {
            txt: &#39;&#39;,
            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 = &#39;&#39;
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + &#39;_&#39;
                } 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">
  <p class="zInput">
      <p class="big-show" v-show="showBig">{{txt2}}</p>
      <input type="text"
             @blur="handerBlur"
             @focus="handerFocus"
             v-bind:value="txt"
             v-on:input="handerInput">
  </p>
</template>

<script>
export default {
    name: &#39;z-input&#39;,
    data () {
        return {
            txt: &#39;&#39;,
            txt2: &#39;&#39;,
            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 = &#39;&#39;
            for (var i = 0; i < lenth; i++) {
                if (i % len === len1 && i > 0) {
                    newStr += str.charAt(i) + &#39;_&#39;
                } 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(&#39;handerKeydown&#39;)
           evt.target.value = evt.target.value.replace(/[^\d]/g, &#39;&#39;)
           // 这里修改不起作用
       },
       handerKeyup (evt) {
           console.log(&#39;keyup&#39;)
           evt.target.value = evt.target.value.replace(/[^\d]/g, &#39;&#39;)
           // 这里执行顺序靠后 修改无用
       },
       handerInput (evt) {
           let val = evt.target.value.substr(0, 13).replace(/[^\d]/g, &#39;&#39;)
           console.log(&#39;handerInput__val&#39;, 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>

로그인 후 복사

로 별도로 작성된 구문 설탕입니다.

숫자 입력을 숫자로만 제한하세요

The 가장 먼저 떠오르는 것은 keyup

동안 숫자가 아닌 항목을 필터링하는 것입니다. 하지만 사실은 keydown->handerInput이 먼저 실행된다는 것입니다. >->keyup그러면 keydown에서 처리되지만 keydown 후에는 에서 <code>evt.target.value

를 수정합니다. handerInput에서 얻은 evt.target.value는 아직 처리되지 않았으므로 keydown에서 처리가 작동하지 않습니다.

handerInput에서 수행해야 합니다. 코드 코드> <a href="//m.sbmmt.com/js-tutorial-387576.html" target="_self">rrreee</a> 처리 시

휴대폰번호와 은행카드의 동기화 표시 기능을 쉽게 구현

🎜🎜🎜🎜🎜모 연맹의 면접 질문입니다🎜 🎜다 그런거 아닌가요? 명확한 생각만 있다면 나중에 글을 쓰면서 최적화하고 싶나요? 🎜그 때, 입력 상자의 내용을 기반으로 미리 보기 상자의 값을 계산하는 계산된 속성을 사용한다는 아이디어를 언급했습니다. 🎜포커스와 블러 이벤트만 처리하세요 🎜손으로 써야지 그러면 면접관이 말문이 막힐 것 같아요🎜🎜요구 사항은 다음과 같습니다🎜🎜🎜🎜 입력란의 데이터 길이가 0보다 크면 미리보기 정보가 표시됩니다🎜🎜🎜🎜커서는 미리보기 정보를 떠났다가 닫힙니다🎜🎜🎜🎜미리보기 정보 4자리마다 특수문자 삽입_, 입력 내용은 그대로 유지됩니다 불변🎜🎜🎜🎜그냥 계산된 속성으로 판단🎜rrreee🎜길이 제한을 추가하면 위 방법이 적합하지 않으니 구현 계획을 바꿔보세요🎜v-model사실 문법적 설탕입니다🎜 v-bind:value와 v-on:input으로 별도로 작성🎜rrreee🎜숫자만 입력하도록 제한🎜가장 먼저 떠오르는 것은 keyup에 있습니다 숫자가 아닌 숫자를 필터링하세요🎜하지만 사실은 keydown->handerInput->keyup🎜🎜그렇습니다. keydown 중에 처리되지만 keydown이 evt.target.value를 수정한 후에 handerInput에서 얻은 evt.target.value 은 아직 처리되지 않았으므로 keydown에서 처리가 작동하지 않습니다 🎜handerInput🎜rrreee🎜에서 처리해야 합니다. 관련 권장 사항: 🎜🎜🎜정기 인증 사용 은행 카드 번호 입력됨 사용자 별 (코드 포함) 🎜🎜🎜🎜 js 및 jq 공유로 은행 카드 계좌 코드를 확인하는 방법 🎜🎜🎜🎜휴대폰 번호, 이메일 주소, 신분증, 은행 카드 정기 확인 예시 🎜🎜

위 내용은 휴대폰번호와 은행카드의 동기화 표시 기능을 간편하게 구현 - 마이칼럼 시푸의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!