inputmask.jsx

<input
  id={id}
  name={name}
  type="text"
  value={value}
  disabled={disabled}
  required={required}
  readOnly={readOnly}
  placeholder={placeholder}
  onSelect={function (event) {
    event.currentTarget.setSelectionRange(
      value.length || 0,
      value.length || 0,
    );
    return;
  }}
  onChange={function () {
    return;
  }}
  onKeyDown={function (event) {
    event.currentTarget.setSelectionRange(
      value.length || 0,
      value.length || 0,
    );
    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
      event.preventDefault();
      return;
    }
    const currentIndex = value.length;
    const currentMaskChar = mask[currentIndex];
    const nextMaskChart = mask[currentIndex + 1];
    // cloning value
    let newValue = `${value}`;
    // if backspace
    if (
      event.key === "Del" ||
      event.key === "Delete" ||
      event.key === "Backspace"
    ) {
      newValue = newValue.slice(0, -1);
      setValue(newValue);
      return;
    }
    // add letter
    if (
      event.key.length === 1 &&
      currentMaskChar === "A" &&
      /[a-zA-Z]{1}/.test(event.key)
    ) {
      newValue += event.key;
      setValue(newValue);
    }
    // add number
    if (
      event.key.length === 1 &&
      currentMaskChar === "9" &&
      /[0-9]{1}/.test(event.key)
    ) {
      newValue += event.key;
      setValue(newValue);
    }
    // add letter or number
    if (
      event.key.length === 1 &&
      currentMaskChar === "#" &&
      /[a-zA-Z0-9]{1}/.test(event.key)
    ) {
      newValue += event.key;
      setValue(newValue);
    }
    // if next is mask other character
    if (
      nextMaskChart !== "A" &&
      nextMaskChart !== "9" &&
      ["-", "_", "."].includes(nextMaskChart)
    ) {
      newValue += nextMaskChart;
      setValue(newValue);
    }
    return;
  }}
/>