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
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
- 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é
<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: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
, 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('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!
Articles Liés
Voir plus- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Comment utiliser cURL pour implémenter les requêtes Get et Post en PHP
- Tous les symboles d'expression dans les expressions régulières (résumé)