Aadhaar маскировка

Question

Я пытаюсь обнаружить нажатие кнопки "Назад" в поле input. Я пробовал e.key и e.which, то есть undefined в мобильном Chrome. Как я могу заставить это работать? В настольном компьютере работает нормально.

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, консоль, выход

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);
 }
});