Dieser Artikel soll mit Ihnen über die einfache Realisierung der Synchronisationsanzeigefunktion von Mobiltelefonnummer und Bankkarte sprechen. Interessierte Freunde können einen Blick darauf werfen

Einfache Realisierung der Synchronisationsanzeigefunktion von Mobiltelefonnummer und Bankkarte

Das ist eine Interviewfrage aus einer bestimmten Liga
Geht es nicht nur darum, eine klare Idee zu haben und diese später zu optimieren
sagte ich Zu diesem Zeitpunkt sollte diese Berechnung für Ideen verwendet werden. Das Attribut berechnet den Wert des Vorschaufelds basierend auf dem Inhalt des Eingabefelds.
Sie müssen nur von Hand schreiben Ich kann nicht von Hand schreiben. Dann dachte der Interviewer, dass ich sprachlos sein würde.

Die Anforderungen sind wie folgt

Die Länge des Eingabeinhalts im Eingabefeld größer als 0 ist und die Vorschauinformationen angezeigt werden
Belassen Sie den Cursor und schließen Sie die Vorschauinformationen
Fügen Sie alle 4 Ziffern ein Sonderzeichen_ ein in den Vorschauinformationen und der Eingabeinhalt bleibt unverändert

Verwenden Sie einfach das berechnete Attribut zur Beurteilung

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

Nach dem Login kopieren

Wenn eine weitere Längenbeschränkung hinzugefügt wird, gilt die obige Methode nicht geeignet. Der Ersatzimplementierungsplan

ist eigentlich ein syntaktischer Zucker v-model, der separat geschrieben wird als
v-bind:valuev-on:input

Eingabe von Zahlen auf nur Zahlen beschränken

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

Nach dem Login kopieren

Das erste, was mir in den Sinn kommt, ist, Nicht-Zahlen herauszufiltern, wenn

Aber Tatsache ist, dass keyup->
->keydownhanderInput zuerst ausgeführt wird keyup Verarbeiten Sie es dann in

, aber nachdem der Keydown in

geändert wurde, ist das in keydown erhaltene evt.target.value immer noch unverarbeitet, sodass die Verarbeitung in
nicht funktioniert. handerInputMuss in <🎜 verarbeitet werden > Zeitevt.target.valuekeydown
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>

Nach dem Login kopieren

Einfach zu realisierende Synchronisierungsanzeigefunktion von Mobiltelefonnummer und Bankkarte

Dies ist eine Interview für eine bestimmte Allianz Frage

Geht es nicht darum, eine klare Idee zu haben und diese beim Schreiben zu optimieren

Ich sagte damals, dass die Idee darin besteht, berechnete Attribute zu verwenden, um den Wert des zu berechnen Vorschaufeld basierend auf dem Inhalt des Eingabefelds. Behandeln Sie den Fokus. Verwenden Sie einfach das Unschärfeereignis. Sie müssen von Hand schreiben. Ich kann nicht von Hand schreiben. Dann dachte der Interviewer, ich wäre sprachlos Die Anforderungen lauten wie folgt

Eingabe Die Datenlänge des Eingabeinhalts im Feld ist größer als 0 und die Vorschauinformationen werden angezeigt

Wenn eine Längenbeschränkung hinzugefügt wird, ist die obige Methode ungeeignet. Der Ersatzimplementierungsplan

ist eigentlich ein syntaktischer Zucker

wird separat geschrieben als

und

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

Nach dem Login kopieren

v-model und beschränkt nur die Eingabe von Zahlen.
Das erste, was mir in den Sinn kommt, ist v-bind:value Nicht-Ziffern herausfiltern, wenn v-on:input Tatsache ist jedoch, dass

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

Nach dem Login kopieren

keyup zuerst ausgeführt wird und dann bei
verarbeitet wird, aber der Tastendruck geändert wird< Nach 🎜>, keydown erhalten bei handerInput ist noch unverarbeitet, daher funktioniert die Verarbeitung bei keyup nicht bei

keydownevt.target.value Verwandte Empfehlungen:
handerInput evt.target.valueVerwenden Sie Regex, um die vom Benutzer eingegebene Bankkartennummer (mit Code) zu überprüfenkeydown
handerInput

So überprüfen Sie die gemeinsame Nutzung des Bankkartenkontocodes mit js und jq

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

Nach dem Login kopieren

Handynummer, E-Mail-Adresse, Personalausweis, reguläre Verifizierungsbeispiele für Bankkarten

Das obige ist der detaillierte Inhalt vonEinfache Realisierung der synchronisierten Anzeigefunktion von Mobiltelefonnummer und Bankkarte – Meine Kolumne Sifu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!