This article is to share with you the simple realization of the synchronous display function of mobile phone number and bank card. Interested friends can take a look at

Simple realization of the synchronous display function of mobile phone number and bank card

This is an interview question from a certain alliance
Isn’t it all about having a clear idea and then optimizing it while writing
At that time, I said that thinking should be calculated The attribute calculates the value of the preview box based on the content of the input box.
Just handle the focus and blur events.
You have to write by hand. I can’t write by hand. Then the interviewer thought that I would be speechless.

Requirements are as follows

1. The length of the input content in the input box is greater than 0, and the preview information is displayed

2. Leave the cursor and close the preview information

3. Insert a special character_ every 4 digits in the preview information, and the input content remains unchanged

Just use the calculated attribute to judge

If another length limit is added, the above method is not suitable. The replacement implementation plan
v-modelis actually a syntactic sugar
written separately asv-bind:valueandv-on:input

Restrict only numbers to be entered
The first thing that comes to mind is to filter out non-numbers whenkeyup
But The fact is thatkeydown->handerInput->keyup

is executed first, then it will be processed atkeydown, but after keydown modifiesevt.target.value, the
evt.target.valueobtained inhanderInputis still unprocessed, so it is said that inkeydownProcessing does not workMust be processed at
handerInput

Simple implementation of the synchronized display function of mobile phone number and bank card

This is an interview for a certain alliance QuestionIsn’t it all about having a clear idea and optimizing it while writing
At that time, I mentioned the idea of using calculated properties to calculate the value of the preview box based on the content of the input box
Dealing with focus Just use the blur event
You have to write it by hand, I can’t write it by hand, and then the interviewer thinks I won’t be speechless

Requirements are as follows

1. Input The data length of the input content in the box is greater than 0, and the preview information is displayed

2. Leave the cursor and close the preview information

3. Insert a special character every 4 digits in the preview information Character_, the input content remains unchanged

Just use the calculated attribute to judge

If you add a length limit, the above method is not appropriate, change the implementation Solution

v-modelis actually a syntactic sugarwritten separately as
v-bind:valueandv-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

Limit only numbers can be entered

The first thing that comes to mind is to filter out non-digits during
keyupBut the fact is that
keydown->is executed first handerInput->keyup

Then it will be processed during

keydown, but after keydown changesevt.target.valueThe
evt.target.valueobtained inhanderInputis still unprocessed, so processing inkeydowndoes not workmust be done in
handerInputTime processing

Related recommendations:

Use regular rules to verify the bank card number entered by the user (with code)

js, jq How to verify bank card account code sharing

Mobile phone number, email address, ID card, bank card regular verification example

The above is the detailed content of Simply realize the synchronization display function of mobile phone number and bank card - My column Sifu. For more information, please follow other related articles on the PHP Chinese website!