Question

<input type="text" ui-mask="**** **** ****" ui-mask-placeholder-char="space" ng-model="user.aadhaar">

当用户输入字符时应变成星号，我们如何使用angular-ui-mask做到这一点。

Answer 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </head>
  <body>
    <input type="tel" maxlength="14" id="aadhaar"  autocomplete="off"/>
    <button onclick="displayVal()">Show Value</button>
    <script>
          let aadhaar = "";
        let aadhaarStack = [];
        let maskStack = [];
        let flag = 0;

      jQuery(function($) { // DOM ready and $ alias secured




  $('#aadhaar').on('input',function(e){
     console.log("this.value.length",this.value,this.value === " ");

    let key = e.which || this.value.substr(-1).charCodeAt(0);
    console.log("key",key)
    if(key === 32){
      aadhaarStack.pop();
      maskStack.pop();
      updateUi();
      return;
    } 
    console.log("here also", this.value.length + ":" + aadhaarStack.length);
     if(this.value.length < aadhaarStack.length){
           aadhaarStack.pop();
           maskStack.pop();

      }else{
           key = String.fromCharCode(key);
                if(aadhaarStack.filter(i => i !== " ").length <= 11 && !isNaN(key)){
                    if(aadhaarStack.length > 1 && (aadhaarStack.filter(i => i !== " ").length) % 4 === 0){
                        aadhaarStack.push(" ");
                        aadhaarStack.push(key);
                        maskStack.push(" ");
                        if(aadhaarStack.filter(i => i !== " ").length > 8){
                            maskStack.push(key);
                        }else{
                            maskStack.push("X");
                        }
                    }else{
                        aadhaarStack.push(key);
                        if(aadhaarStack.filter(i => i !== " ").length > 8){
                            maskStack.push(key);
                        }else{
                           maskStack.push("X");
                        }
                    }
                }
      }

     updateUi();

  });

     function updateUi(){
        setTimeout(function(){
        aadhaar = maskStack.join("");
        $('#aadhaar').val(aadhaar);
      },100);
     }

});
       function displayVal(){
       alert(aadhaarStack.filter(i => i != " ").join(""));
     }

    </script>


  </body>
</html>

找到更好的方法

安全输入角度ui遮罩

1 个答案: