简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > 後端開發 > php教程 > 主體

簡單實現手機號銀行卡的同步顯示功能 - 我的專欄 思否

不言
發布： 2023-03-22 18:30:02
原創
1811 人瀏覽過

這篇文章就是給大家分享了關於簡單實現手機號銀行卡的同步顯示功能，有感興趣的小伙伴可以看一下

簡單實現手機號銀行卡的同步顯示功能

這是某盟的一道面試題  
難道不都是只要有了清晰的思路後邊寫邊優化麼 
當時我就說了思路用計算屬性根據輸入框的內容計算出預覽框的值 
處理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
作者最新文章
最新問題
使用php開發伺服器將行動裝置連接到vite：暴露主機 解決方案：感謝@parastoo，它現在可以工作了。我必須像這樣啟動開發伺服器（2個不同的終端選項卡）：vite--host=HOST_IPphpartisanserve--hos...
來自於 2023-11-02 12:04:14
0
2
174
在Express中進行axios post請求後進行重定向 在接受來自Axios的發布請求後，我無法進行重定向。我確實知道請求正在發送，並且它至少從'/'路由獲得一些響應，因為我的控制台記錄了“index”、“用戶驗證”，這是當有人向'/發...
來自於 2023-10-17 19:45:58
0
1
209
UseEffect觸發的無限API調用 我建構了一個MERN項目，其中元件FrindListWidget在2個條件下被呼叫。如果是使用者自己的朋友列表，則會渲染該小工具，並且Reduxuser.friends中的狀態也會...
來自於 2023-09-20 20:50:56
0
1
203
Redux 狀態無法正確存取後端 (mySQL) 數據 我在後端（mySQL）和前端之間渲染資料時遇到了問題。我已經在reduxdevtools和控制台日誌中進行了調試，但仍然找不到原因。數據在控制台日誌中正確獲取，但當我記錄我的狀態時...
來自於 2023-09-20 10:40:44
0
1
231
NextJS應用程式中的Stripe Elements未顯示 我正在開發一個基於nextJS的應用，並且整合了stripe的web元素（卡片），但是這些元素沒有顯示出來。我在檢查中看到是空的。它們在我的其他reactJS應用程式中工作正常，但...
來自於 2023-09-17 00:22:33
0
1
325
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！