Cet article est pour partager avec vous la réalisation simple de la fonction d'affichage de synchronisation du numéro de téléphone portable et de la carte bancaire. Les amis intéressés peuvent y jeter un œil

Réalisation simple de la fonction d'affichage de synchronisation du numéro de téléphone portable. et carte bancaire

C'est une question d'entretien d'une certaine ligue
Le but n'est-il pas d'avoir une idée claire et de l'optimiser plus tard
J'ai dit ? à ce moment-là, ce calcul doit être utilisé pour les idées. L'attribut calcule la valeur de la zone d'aperçu en fonction du contenu de la zone de saisie
Gérez simplement les événements de focus et de flou
Vous devez écrire à la main. Je ne peux pas écrire à la main. Ensuite, l'intervieweur a pensé que je serais sans voix

Les exigences sont les suivantes

La longueur du contenu saisi dans la zone de saisie. est supérieur à 0 et les informations d'aperçu sont affichées
Laissez le curseur et fermez les informations d'aperçu
Insérez un caractère spécial_ tous les 4 chiffres dans les informations d'aperçu et le contenu d'entrée reste inchangé

Utilisez simplement l'attribut calculé pour juger

<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>

Copier après la connexion

Si une autre limite de longueur est ajoutée, la méthode ci-dessus est ne convient pas. Le plan de mise en œuvre de remplacement
v-model est en fait un sucre syntaxique
écrit séparément comme v-bind:value et 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>

Copier après la connexion

Limiter la saisie des nombres aux seuls nombres
La première chose qui me vient à l'esprit est de filtrer les non-nombres quand keyup
Mais le fait est d'exécuter keydown->handerInput->keyup

en premier

Ensuite, traitez-le dans keydown, mais une fois la touche enfoncée modifiée dans evt.target.value, le
obtenu dans handerInput n'est toujours pas traité, donc le traitement dans evt.target.value ne fonctionne pas keydown Doit être traité à
heurehanderInput

<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>

Copier après la connexion

Facile à réaliser la fonction d'affichage de synchronisation du numéro de téléphone portable et de la carte bancaire

Il s'agit d'un interview pour une certaine alliance Question Le tout n'est-il pas d'avoir une idée claire et de l'optimiser en écrivant
J'avais dit à ce moment-là que l'idée était d'utiliser des attributs calculés pour calculer la valeur du ? zone de prévisualisation basée sur le contenu de la zone de saisie.
Gérer le focus Utilisez simplement l'événement flou
Vous devez l'écrire à la main, je ne peux pas l'écrire à la main, puis l'intervieweur pense que je ne le ferai pas. soyez sans voix

Les exigences sont les suivantes

Entrée La longueur des données du contenu d'entrée dans la boîte est supérieure à 0 et les informations d'aperçu sont affichées
Le curseur quitte et les informations d'aperçu sont fermées
Les informations d'aperçu insèrent un caractère spécial tous les 4 chiffres Caractère _, le contenu d'entrée reste inchangé

Utilisez simplement l'attribut calculé pour juger

<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>

Copier après la connexion

Si une limite de longueur est ajoutée, la méthode ci-dessus est inappropriée. Le plan de mise en œuvre de remplacement

est. en fait un sucre syntaxique v-model écrit séparément comme
et v-bind:valuev-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>

Copier après la connexion

restreignant la saisie des nombres uniquement

La première chose qui me vient à l'esprit est
Filtrer les non- chiffres quand keyup mais le fait est que
->keydown->handerInputkeyup

est exécuté en premier, puis il sera traité à

, mais la touche enfoncée est modifiée keydownAprès evt.target.value, le
obtenu à handerInput n'est toujours pas traité, donc le traitement à evt.target.value ne fonctionne pas keydown doit être traité à
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>

Copier après la connexion

Connexes. recommandations :

Utiliser regex pour vérifier le numéro de carte bancaire saisi par l'utilisateur (avec code)

Comment vérifier le partage de code de compte de carte bancaire avec js et jq

Numéro de téléphone portable, adresse email, carte d'identité, exemples de vérification régulière de carte bancaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Réalisation simple de la fonction d'affichage synchronisé du numéro de téléphone portable et de la carte bancaire - Ma chronique Sifu

Réalisation simple de la fonction d'affichage de synchronisation du numéro de téléphone portable. et carte bancaire

Les exigences sont les suivantes