HTML input only accept 0-9(Number in English) and ০-৯ (Number in Bengali)?

Question

I have a html input field . I want to allow only [0-9] (digits in English) and [০-৯] (digits in Bengali)

If I used type='number' then it only support [0-9] not support [০-৯].

If I used type='text' then it support any type of character

Any Idea please?

Answer 1

If you want to completely disable the user from inserting not numeric digits, then you should overwrite the keydown event and prevent it if the key isn't right.
You can also add an event for paste to only allow paste events that only contain the allowed characters.

var allowedKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
  "ARROWRIGHT", "ARROWLEFT", "TAB", "BACKSPACE", "DELETE", "HOME", "END", "০", "১", "২", "৩", "৪", "৫", "৬", "৭", "৮", "৯"
];

if (document.readyState === "complete") onLoad();
else addEventListener("load", onLoad);

function onLoad() {
  document.querySelectorAll("input.numeric").forEach(function(input) {
    input.addEventListener("keydown", onInputKeyDown);
    input.addEventListener("paste", onInputPaste);
  });
}

function onInputKeyDown(event) {
  if (!allowedKeys.includes(event.key.toUpperCase()) && !event.ctrlKey) {
    event.preventDefault();
  }
}

function onInputPaste(event) {
  var clipboardData = event.clipboardData || window.clipboardData;
  if (/^[0-9০-৯]+$/g.test(clipboardData.getData("Text"))) return;
  event.stopPropagation();
  event.preventDefault();
}

<input type="text" class="numeric">

Answer 2

Here is a working pure HTML-CSS solution. Please note that text can still be entered into the input element but the browser can handle the validation.

It is a trade-off you need to make to support multilingual-input box.

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

<form>
  <label for="numberBox">Enter a number</label>
  <input type="text" name="numberBox" pattern="[০-৯0-9]" title="Numbers only">
  <button>Submit</button>
</form>