휴대폰번호와 은행카드의 동기화 표시 기능을 간편하게 구현 - 마이칼럼 시푸
- 不言원래의
- 2018-03-30 11:50:431864검색
이 글은 휴대폰 번호와 은행카드의 동기화 표시 기능의 간단한 구현에 대해 공유하기 위한 것입니다. 관심 있는 친구들은 한 번 살펴보세요
휴대폰 번호와 은행 카드의 동기화 표시 기능의 간단한 구현
이건 모 동맹 인터뷰 질문
글을 쓰면서 명확한 아이디어를 가지고 그것을 최적화하는 것이 전부 아닌가요?
그때 미리보기 상자의 가치를 계산하기 위해 계산된 속성을 사용하는 것이 아이디어라고 말했습니다.
포커스와 블러 이벤트만 처리하면 됩니다.
손으로 써야 하는데, 그러면 면접관이 말문이 막힐 거라 생각합니다.
요구사항 은 다음과 같습니다
입력창에 입력된 내용의 길이가 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는 실제로 <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: '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>로 별도로 작성된 구문 설탕입니다. 숫자 입력을 숫자로만 제한하세요
The 가장 먼저 떠오르는 것은keyup 동안 숫자가 아닌 항목을 필터링하는 것입니다. 하지만 사실은 keydown->handerInput이 먼저 실행된다는 것입니다. >->keyup그러면 keydown에서 처리되지만 keydown 후에는 에서 <code>evt.target.value
evt.target.value는 아직 처리되지 않았으므로 keydown에서 처리가 작동하지 않습니다. handerInput에서 수행해야 합니다. 코드 코드> <a href="http://www.php.cn/js-tutorial-387576.html" target="_self">rrreee</a> 처리 시
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.