本篇文章就是给大家分享了关于简单实现手机号银行卡的同步显示功能,有感兴趣的小伙伴可以看一下
这是某盟的一道面试题
难道不都是只要有了清晰的思路后边写边优化么
当时我就说了思路用计算属性根据输入框的内容计算出预览框的值
处理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
9116fe449ac52b01331f03f825620b05 bd5485bf241f8f25600f58d724cbf170 40dd2db874b79f659b9bd9db3ca6e62e{{txt2}}94b3e26ee717c64999d7867364b1b4a3 3d4998b3e102650fd14aa74928ea3a81 94b3e26ee717c64999d7867364b1b4a3 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a 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 11acf8853db579d63489c23499573767 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 }, } } 2cacc6d41bbb37262a98f745aa00fbf0
限制只能输入数字
首先想到的是在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中文网其他相关文章!