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
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
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
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: 'z-input', data () { return { txt: '', 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 = '' for (var i = 0; i < lenth; i++) { if (i % len === len1 && i > 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 }, } } </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: '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 < lenth; i++) { if (i % len === len1 && i > 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 }, } } </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
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('handerKeydown') evt.target.value = evt.target.value.replace(/[^\d]/g, '') // 这里修改不起作用 }, handerKeyup (evt) { console.log('keyup') evt.target.value = evt.target.value.replace(/[^\d]/g, '') // 这里执行顺序靠后 修改无用 }, handerInput (evt) { let val = evt.target.value.substr(0, 13).replace(/[^\d]/g, '') console.log('handerInput__val', 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>
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
<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: 'z-input', data () { return { txt: '', 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 = '' for (var i = 0; i < lenth; i++) { if (i % len === len1 && i > 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 }, } } </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:value
v-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 }, } } 2cacc6d41bbb37262a98f745aa00fbf0restreignant 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
->handerInput
keyup
, mais la touche enfoncée est modifiée keydown
Aprè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('handerKeydown') evt.target.value = evt.target.value.replace(/[^\d]/g, '') // 这里修改不起作用 }, handerKeyup (evt) { console.log('keyup') evt.target.value = evt.target.value.replace(/[^\d]/g, '') // 这里执行顺序靠后 修改无用 }, handerInput (evt) { let val = evt.target.value.substr(0, 13).replace(/[^\d]/g, '') console.log('handerInput__val', 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!