CODEWITHSUNDEEP
javascriptdom-events
Bertrand B
Bertrand B

Reputation: 93

Prevent Backspace and Delete from being "handled" by input event in vanilla JS

I am trying to create a simple program that adds "hyphens" automatically to a text input field. The goal is to add hyphens at the 5th, 9th and 14th character. Aside from that it should only allow numbers, which it does by "replacing" anything typed by an empty string.

Now it works fine : if you type something, no problem, the hyphens get added and only the numbers are taken into account. When you copy / paste a string (either by ctrlcmd + C / ctrlcmd + v or right click copy / paste), it removes the characters not allowed by the ReGex and place the hyphens at the right spot. However, when I try and delete the hyphens, it doesn't work. I guess that, looking at my code, the hyphens get removed, so the string now being 4, 9 or 14 chars long, the hyphens get automatically added again as soon as it's removed. I have tried replacing the input listener by a keyup, keypress, or keydown, which is fine if I simply return a false result from the function when the event.key is either backspace or delete, but then, the right click copy paste doesn't work anymore, which I want it to.

Is there a way for me to listen for any input, using the input event listener, except the backpsace or del key ? Any other ideas ? I'd like a vanilla JS answer (though I guess a jQuery one could be useful to someone else).

Here is my code :

const selectConfirmBtn = document.querySelector(".confirm");
const selectSNInput = document.querySelector(".serial-number");

let serialNumberLength;
let serialNumber;

selectSNInput.addEventListener("input", function(event) {

    // if (event.key === "Backspace" || event.key === "Delete") {
    //     return false;
    // }

  selectSNInput.value = selectSNInput.value.replace(/[^0-9]/g, "");


  console.log(selectSNInput.value);
  console.log(selectSNInput.value.length);

  if (selectSNInput.value.length >= 4) {
    selectSNInput.value =
      selectSNInput.value.substring(0, 4) +
      "-" +
      selectSNInput.value.substring(4, selectSNInput.value.length);

    if (selectSNInput.value.length >= 9) {
      selectSNInput.value =
        selectSNInput.value.substring(0, 9) +
        "-" +
        selectSNInput.value.substring(9, selectSNInput.value.length);
    }
    if (selectSNInput.value.length >= 14) {
      selectSNInput.value =
        selectSNInput.value.substring(0, 14) +
        "-" +
        selectSNInput.value.substring(14, selectSNInput.value.length);
    }
  }
  if (selectSNInput.value.length == 19) {
    selectConfirmBtn.disabled = false;
  } else {
    selectConfirmBtn.disabled = true;
  }
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <label>Enter a serial number!
        <input type="text" value="" class="serial-number">
    </label>

    <input class="confirm" type="button" value="confirm" disabled><br>

    <div class="message"></div>



    <script src="js/condition.js"></script>
</body>

</html>

Upvotes: 0

Views: 778

Answers (1)

Ravikumar
Ravikumar

Reputation: 2205

You are suffixing - to 4th digit, instead you could try prefixing to 5th digit i.e. insert - only when 5th digit is available like below.

const selectConfirmBtn = document.querySelector(".confirm");
const selectSNInput = document.querySelector(".serial-number");

let serialNumberLength;
let serialNumber;

selectSNInput.addEventListener("input", function(event) {
  const splitByLen = 4;
  const value = selectSNInput.value.replace(/[^0-9]/g, "");
  let result = [],
    start = 0,
    end = 0;

  do {
    end = start + splitByLen > 12 ? start + value.length : start + splitByLen;
    const subValue = value.slice(start, end);
    if (subValue) {
      result.push(subValue);
    }
    start = end;
  } while (end < value.length);

  selectSNInput.value = result.join('-');
  if (selectSNInput.value.length == 19) {
    selectConfirmBtn.disabled = false;
  } else {
    selectConfirmBtn.disabled = true;
  }
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <label>Enter a serial number!
        <input type="text" value="" class="serial-number">
    </label>

  <input class="confirm" type="button" value="confirm" disabled><br>

  <div class="message"></div>



  <script src="js/condition.js"></script>
</body>

</html>

Upvotes: 1

Related Questions