社区 学习 工具库 休闲
搜索
简体中文
首页 > 后端开发 > php教程 > 正文

简单实现手机号银行卡的同步显示功能 - 我的专栏 思否

不言
发布： 2023-03-22 18:30:02
原创
1876 人浏览过

本篇文章就是给大家分享了关于简单实现手机号银行卡的同步显示功能，有感兴趣的小伙伴可以看一下

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

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

要求如下

  1. 输入框输入内容数据长度大于0，展示出预览信息

  2. 光标离开关闭预览信息

  3. 预览信息每隔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>
登录后复制


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


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

要求如下

  1. 输入框输入内容数据长度大于0，展示出预览信息

  2. 光标离开关闭预览信息

  3. 预览信息每隔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>
登录后复制

  相关推荐：

使用正则验证用户输入的银行卡号（附代码）

js、jq如何验证银行卡账号代码分享

手机号码、电子邮箱、身份证、银行卡正则验证实例

以上是简单实现手机号银行卡的同步显示功能 - 我的专栏 思否的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
同步 手机号 银行卡
来源：php.cn
上一篇：TP框架如何实现php数据导出word详解 下一篇：PHP生成带logo图像二维码的两种方法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在网络应用程序中显示版本信息的最佳实践是什么？ 我正在开发一个网络应用程序。在网络应用程序中显示版本信息的最佳实践是什么？我正在使用语义版本控制，并且我已经有了semver，例如1.2.0但我很好奇在哪里显示它的最佳方式以及如何...
来自于 2024-04-06 19:13:16
0
2
476
使用 window.open() 和 data 打开计算文档：scheme 我有一个在浏览器中运行的网页，该网页生成一个计算的HTML文档，我想在新的浏览器选项卡中打开该文档。简单而肮脏的方法是这样做：constw=window.open('','_bla...
来自于 2024-04-06 15:06:34
0
1
378
使用 CSS Tailwind 的图像悬停卡动画未按预期运行。 <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
来自于 2024-04-06 13:43:17
0
1
356
我在使用CSS网格时遇到了高度不符合预期的问题，我可能犯了哪些错误？ 我目前正在学习CSS网格，并且被要求通过将其分解为网格来制作这张卡片。附上了我想要制作的网格的图片。实际上有一个更大的网格（在CSS中称为profile-grid），所有这些卡片都...
来自于 2024-04-06 12:52:14
0
1
339
按钮点击时，JavaScript函数无效 我已经在互联网上搜索并尝试了很多方法，但是在一个相对简单的问题上卡住了。下面的代码是我问题的全部范围<script>//Functiontoeventuallycopy...
来自于 2024-04-05 13:14:53
0
2
1433
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板