javascript - 阿德哈尔掩蔽

Question

我正在尝试检测输入字段上的后退按钮按下情况。我尝试过 e.key 和 e.which，它们在移动 Chrome 中是 undefined。我怎样才能让它发挥作用？在桌面上它工作正常。

jQuery(function($) { // DOM ready and $ alias secured
  let aadhaar = "";
  let aadhaarStack = [];
  let maskStack = [];
  let flag = 0;

  $('#aadhaar').on('input', function(e) {
    let key = e.which || this.value.substr(-1).charCodeAt(0);
    console.log("here also")
    
    if (flag === 1) {
      console.log("here")
      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);
  }

  $('#aadhaar').on('keydown', function(e) {
    alert(e.key);
    let key = e.which || this.value.substr(-1).charCodeAt(0);
    if (key === 8 || key === 46 || e.key === 'Backspace') {
      flag = 1;
    } else {
      flag = 0;
    }
    console.log("first here")
  })
});

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="text" maxliength="14" id="aadhaar" autocomplete="off" />

这是 JSBin 链接 https://jsbin.com/rogepevutu/1/edit?html,js,console,output

Answer 1

实际上你不需要处理后按，因为这个解决方案并不可靠。我的解决方案是尝试比较上一个和当前的长度，然后根据该结果执行任务。

jQuery(function($) { // DOM ready and $ alias secured
  let aadhaar = "";
  let aadhaarStack = [];
  let maskStack = [];
  let flag = 0;

  $('#aadhaar').on('input', function(e) {
    let key = e.which || this.value.substr(-1).charCodeAt(0);    
    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);
 }
});