Heim > Artikel > Backend-Entwicklung > Einfache Realisierung der synchronisierten Anzeigefunktion von Mobiltelefonnummer und Bankkarte – Meine Kolumne Sifu

Einfache Realisierung der synchronisierten Anzeigefunktion von Mobiltelefonnummer und Bankkarte – Meine Kolumne Sifu

不言Original: 2018-03-30 11:50:431864Durchsuche

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>

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>

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

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>

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

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

keyup zuerst ausgeführt wird und dann bei
verarbeitet wird, aber der Tastendruck geändert wird, 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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erklärung, wie das TP-Framework den PHP-Datenexport in Word implementiertNächster Artikel：Detaillierte Erklärung, wie das TP-Framework den PHP-Datenexport in Word implementiert

In Verbindung stehende Artikel

Mehr sehen