Maison  >  Article  >  développement back-end  >  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 synchronisé du numéro de téléphone portable et de la carte bancaire - Ma chronique Sifu

不言
不言original
2018-03-30 11:50:431864parcourir

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

  1. La longueur du contenu saisi dans la zone de saisie. est supérieur à 0 et les informations d'aperçu sont affichées

  2. Laissez le curseur et fermez les informations d'aperçu

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

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>

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>
                                     


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

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

  2. Le curseur quitte et les informations d'aperçu sont fermées

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

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

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn