Aadhaar masking

Question

I am trying to detect a back button press on an input field. I've tried e.key and e.which, which is undefined in mobile Chrome. How can I get this to work? In desktop its working fine.

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" />

Here is the JSBin link https://jsbin.com/rogepevutu/1/edit?html,js,console,output

this might help https://stackoverflow.com/a/18213393/2943218 — Carsten Løvbo Andersen, Jan 14 '20 at 15:43
Does this answer your question? [how to control back button event in Jquery mobile?](https://stackoverflow.com/questions/18211984/how-to-control-back-button-event-in-jquery-mobile) — FDisk, Jan 14 '20 at 15:45
From the behaviour of the code it looks like you're simply trying to hide the user input with `X` characters. As such, why not just use a `type="password"` input...? — Rory McCrossan, Jan 14 '20 at 15:45
Also note that `maxliength` needs to be changed to `maxlength` — Rory McCrossan, Jan 14 '20 at 15:46
@RoryMcCrossan its not only changing characters it adding spaces after for every four characters and also last 4 characters should be visible — Srikanth Gowda, Jan 14 '20 at 15:50
@FDisk that's regarding handling back button behaviour in the jQuery Mobile library. In this case the OP means the delete key when using the standard jQuery library on a mobile device. — Rory McCrossan, Jan 14 '20 at 15:50
its kind of credit card number masking. i just need to figure out backspace press on mobile devices. — Srikanth Gowda, Jan 14 '20 at 15:52
Do you actually need to add the spaces to the value entered by the user? That seems a needless over-complication. It makes more sense to accept the value without any spaces. Then you can add the spaces *only* where the value is displayed in the UI. — Rory McCrossan, Jan 14 '20 at 15:53
@RoryMcCrossan probably u r correct maybe we can do that too. but how do i find the back button press in mobile devices — Srikanth Gowda, Jan 14 '20 at 15:59
Detecting keypresses on mobile device keyboards is notoriously unreliable. This is why I would strongly suggest you use a different approach — Rory McCrossan, Jan 14 '20 at 16:01
@RoryMcCrossan if we can detect other keypresses then why can't back button press. I hope there has to be a way. — Srikanth Gowda, Jan 14 '20 at 16:13
@FDisk i tried it in desktop it is working in mobile it is unidentified — Srikanth Gowda, Jan 14 '20 at 16:26
@RoryMcCrossan u r right detecting keyboard presses on mobile devices unreliable. I thought v can do it, but I was wrong. Thanks — Srikanth Gowda, Jan 14 '20 at 17:23

score 1 · Accepted Answer · answered Jan 14 '20 at 17:16

Actually you don't need to handle back press as this solution is not reliable. My solution is to try comparing the length of the prev and current, and you perform your task based on that.

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

Amazing this is what I am looking for awesome bro thanks – Srikanth Gowda Jan 14 '20 at 17:24 — Srikanth Gowda, Jan 14 '20 at 17:24

score -1 · Answer 2 · answered Jan 12 '23 at 17:30

Our Masking Solution is based on Computer Vision, OCR, deep learning frameworks to serve the purpose of aadhar card masking for real-life unstructured data. Process your customer’s Aadhaar in seconds, and mask your documents like humans.

https://textck.com/digitalonboarding/aadhaar-masking/

Aadhaar masking

2 Answers2