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

Source: Internet
Author: User
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.