這篇文章就是給大家分享了關於簡單實現手機號銀行卡的同步顯示功能,有感興趣的小伙伴可以看一下
這是某盟的一道面試題
難道不都是只要有了清晰的思路後邊寫邊優化麼
當時我就說了思路用計算屬性根據輸入框的內容計算出預覽框的值
處理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: '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"> <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: '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>
#這是某盟的面試題
難道不都是只要有了清晰的思路後邊寫邊優化麼
#當時我就說了思路用計算屬性根據輸入框的內容計算出預覽框的值
#處理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: '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"> <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: '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>
相關建議:
以上是簡單實現手機號銀行卡的同步顯示功能 - 我的專欄 思否的詳細內容。更多資訊請關注PHP中文網其他相關文章!