Simple to achieve the mobile phone number card synchronization display function-My column think No

This article is to share the simple implementation of the mobile phone number of the bank card synchronization display function, interested in small partners can see

Simple implementation of the mobile phone number card synchronization display function

This is a question for a certain union.
Isn't it all just a clear idea behind the writing edge optimization?
That's what I said. Calculates the value of the preview box based on the contents of the input box using the calculated property
Handle Focus and Blur events
No handwriting, no handwriting at all, and then the interviewer thinks I'm not going to be silent.

Requirements are as follows

1. Input box input content data length greater than 0, display preview information

2. Cursor away close Preview information

3. Preview information Insert a special character every 4 bits _, the input content is unchanged

is to use the computed attribute to judge

<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 &G T  0) {This.showbig = true} return This.getstr (This.txt, 4)}, methods: {Handerblur () {This.showbig = false}, Handerfocus (evt) {if (EVT.TARGET.V Alue.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) {        Fix last one for supplementary question 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>

If you add a length limit, the above method is not appropriate, the replacement implementation
V-model is actually a syntactic sugar
written separately as V-bind:value and 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)//Limit length 13 bits 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 to len1 = len-1 let Newstr = " for (var i = 0; i < lenth; i++) {if (i% len = = = Len1 && i > 0) {New            Str + = Str.charat (i) + ' _ '} else {newstr + = Str.charat (i)} } if (newstr.length% (len + 1) = = = 0) {//Resolve last one for supplementary issue newstr = NEWSTR.SUBSTR (0 , Newstr.length-1)} return newstr},}}</script>

Limit input Numbers only
The first thought was to keyup filter out non-numbers at the time
But the fact is that the first implementation--- keydown handerInputkeyup

That's when it's keydown time to deal with it, but after the KeyDown changes evt.target.value
handerInputIt's still unhandled evt.target.value , so it keydown doesn't work in the process.
Must be handerInput processed at time

<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, ')           //This modification does not work       },       Handerkeyup (evt) {           console.log (' KeyUp ')           evt.target.value = Evt.target.value.replace (/[^\d ]/g, ')           //Here executes the order by modifying       the useless},       Handerinput (evt) {let           val = evt.target.value.substr (0, +). Replace (/ [^\d]/g, ')           console.log (' Handerinput__val ', Val)           //The Val that gets here is the pure number           Evt.target.value = Val           This.txt = Val           if (this.txt.length > 0) {               This.showbig = True           }           this.txt2 = This.getstr (This.txt, 4)       },</script>

Simple implementation of the mobile phone number card synchronization display function

This is a question for a certain union.
Isn't it all just a clear idea behind the writing edge optimization?
That's what I said. Calculates the value of the preview box based on the contents of the input box using the calculated property
Handle Focus and Blur events
No handwriting, no handwriting at all, and then the interviewer thinks I'm not going to be silent.

Requirements are as follows

1. Input box input content data length greater than 0, display preview information

2. Cursor away close Preview information

3. Preview information Insert a special character every 4 bits _, the input content is unchanged

is to use the computed attribute to judge

<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 &G T  0) {This.showbig = true} return This.getstr (This.txt, 4)}, methods: {Handerblur () {This.showbig = false}, Handerfocus (evt) {if (EVT.TARGET.V Alue.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) {        Fix last one for supplementary question 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>

If you add a length limit, the above method is not appropriate, the replacement implementation
V-model is actually a syntactic sugar
written separately as V-bind:value and 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)//Limit length 13 bits 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 to len1 = len-1 let Newstr = " for (var i = 0; i < lenth; i++) {if (i% len = = = Len1 && i > 0) {New            Str + = Str.charat (i) + ' _ '} else {newstr + = Str.charat (i)} } if (newstr.length% (len + 1) = = = 0) {//Resolve last one for supplementary issue newstr = NEWSTR.SUBSTR (0 , Newstr.length-1)} return newstr},}}</script>

Limit input Numbers only
The first thought was to keyup filter out non-numbers at the time
But the fact is that the first implementation--- keydown handerInputkeyup

That's when it's keydown time to deal with it, but after the KeyDown changes evt.target.value
handerInputIt's still unhandled evt.target.value , so it keydown doesn't work in the process.
Must be handerInput processed at time

<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, ')           //This modification does not work       },       Handerkeyup (evt) {           console.log (' KeyUp ')           evt.target.value = Evt.target.value.replace (/[^\d ]/g, ')           //Here executes the order by modifying       the useless},       Handerinput (evt) {let           val = evt.target.value.substr (0, +). Replace (/ [^\d]/g, ')           console.log (' Handerinput__val ', Val)           //The Val that gets here is the pure number           Evt.target.value = Val           This.txt = Val           if (this.txt.length > 0) {               This.showbig = True           }           this.txt2 = This.getstr (This.txt, 4)       },</script>

Related recommendations:

Use regular validation of the bank card number entered by the user (with code)

JS, JQ How to verify the bank Card account code sharing

Mobile phone number, e-mail, ID card, bank card regular verification example