"masking account number"
Bootstrap 4.1.1 Snippet by nileshkardate

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue.js Account Number Masking</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <div class="col-12"> <label for="accountNumber">Account Number:</label> <input id="accountNumber" type="tel" v-model="accountNumber" @input="maskAndDisplayLastDigits"> </div> <div class="col-12"> <label for="confAccountNumber">Re-enter Account Number:</label> <input id="confAccountNumber" type="tel" v-model="confAccountNumber" @input="maskAndDisplayLastDigits"> </div> </div> <script> new Vue({ el: '#app', data: { accountNumber: '', confAccountNumber: '' }, methods: { maskAndDisplayLastDigits() { // Get the total number of digits const totalDigits = this.accountNumber.length; // Determine the number of asterisks to display (totalDigits - 2) const numAsterisks = Math.max(0, totalDigits - 2); // Create a string with the appropriate number of asterisks const asteriskString = '*'.repeat(numAsterisks); // Get the last two characters of the accountNumber const lastTwoDigits = this.accountNumber.slice(-2); // Update the value displayed in the accountNumber with asterisks + lastTwoDigits this.accountNumber = asteriskString + lastTwoDigits; // Repeat the same process for confAccountNumber const totalDigitsConf = this.confAccountNumber.length; const numAsterisksConf = Math.max(0, totalDigitsConf - 2); const asteriskStringConf = '*'.repeat(numAsterisksConf); const lastTwoDigitsConf = this.confAccountNumber.slice(-2); this.confAccountNumber = asteriskStringConf + lastTwoDigitsConf; } } }); </script> </body> </html>

Related: See More

Vue Argon Design System
iphone number pad
Bootstrap Number Spinner
Account in Navbar

Questions / Comments: