简单实现手机号银行卡的同步显示功能
同步 实现 简单 功能 显示 手机号 银行卡
2023-09-27 14:26:44 时间
简单实现手机号银行卡的同步显示功能
这是某盟的一道面试题
难道不都是只要有了清晰的思路后边写边优化么
当时我就说了思路用计算属性根据输入框的内容计算出预览框的值
处理focus和blur事件即可
非要手写,手写根本写不出啊,然后面试官就认为我不会 无语了
要求如下
- 输入框输入内容数据长度大于0,展示出预览信息
- 光标离开关闭预览信息
- 预览信息每隔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
时处理
原文地址:https://segmentfault.com/a/1190000014083071
相关文章
- 《Java并发编程实战》第五章 同步容器类 读书笔记
- 多浏览器同步测试工具的设计与实现
- Redis总结(五)缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结(一)AutoResetEvent的使用介绍(用AutoResetEvent实现同步) C#总结(二)事件Event 介绍总结 C#总结(三)DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列(六): RabbitMQ 高可用集群
- Android如何实现一个EditText中输入,另一个EditText中同步显示
- Async/Await 如何通过同步的方式实现异步?
- 【BOC同步跟踪】BOC信号跟踪算法的MATLAB仿真
- go sync 处理同步需求详解
- Ringbuffer同步问题分析&rculist测试
- 多浏览器同步测试工具的设计与实现
- [转]Linux时间同步基础知识
- 内核线程与用户线程区别、同步互斥的实现原理——详解
- Linux 远程数据同步工具详解
- 教你实现快应用storage接口同步调用
- java两种同步机制的实现 synchronized和reentrantlock
- Windows系统时间同步出错解决办法
- Rsync+inotify 实时数据同步 inotify master 端的配置
- 利用cwRsync客户端将Windows下文件同步到Linux
- eclipse下SVN同步时忽略target文件夹
- 教你实现快应用storage接口同步调用
- FIFO实战学习-同步FIFO/异步FIFO-格雷码
- Unity 工具类 之 简单的异步场景加载(包含加载进度和同步加载方法)类 LoadSceneManager 实现
- mysql半同步复制实现
- Linux 同步时间
- rsync结合inotify工具实现实时同步传输文件
- ALIBABA DUBBO框架同步调用原理分析
- mysql-数据库的主从同步,实现读写分离
- 教外谈(2):C/C++结合python实现阿里云盘数据同步
- Kettle实现 HDFS文件解析同步到SQLServer数据库(ETL 包括:时间格式化、IP校验、字段拼接)
- Kettle 数据同步 Caused by: com.microsoft.sqlserver.jdbc.SQLServerException
- 【WPF】修改数据层ViewModel后,UI界面未同步更新
- Linux 之 rsync实现服务器的文件同步