CODEWITHSUNDEEP
javascripthtmlregex
Helal Uddin
Helal Uddin

Reputation: 115

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

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?

Upvotes: 7

Views: 1767

Answers (7)

user11913484
user11913484

Reputation:

I have this untested OneLiner

<input type="number" onkeypress="return /[0-9০-৯]/i.test(event.key)">

Upvotes: 0

Vigen
Vigen

Reputation: 503

Use pattern attribute for html5

EDIT pattern attribute changes input validity. You can test validity with the following example

<!DOCTYPE html>
<html>
<body>
    <input type="text" id="username" pattern="[0-9]">

    <script>
    var input = document.getElementById('username');

    input.addEventListener('input', function(event){
        console.log(input.validity.valid);
    });
    </script>

</body>
</html>

to restrict input you can just change input value in listener.

Here is an example for input validation with pattern attribute.

Upvotes: 0

bobble bubble
bobble bubble

Reputation: 18535

To construct the JS regex pattern, first see Bengali Unicode Charts.

09E6 ০ BENGALI DIGIT ZERO
09E7 ১ BENGALI DIGIT ONE
09E8 ২ BENGALI DIGIT TWO
09E9 ৩ BENGALI DIGIT THREE
09EA ৪ BENGALI DIGIT FOUR
09EB ৫ BENGALI DIGIT FIVE
09EC ৬ BENGALI DIGIT SIX
09ED ৭ BENGALI DIGIT SEVEN
09EE ৮ BENGALI DIGIT EIGHT
09EF ৯ BENGALI DIGIT NINE

For matching Unicode in JavaScript \uXXXX notation can be used. To match the wanted range together with \d for [0-9], all can be put into a character class and quantified with + for one or more.

[\d\u09E6-\u09EF]+

See this demo at regex101 (if using with JS functions, might want to anchor the pattern)

Demo 1: Validation with HTML input pattern attribute 

<!-- input pattern test-->
<form>
  <input type="text" value="1234567890০১২৩৪৫৬৭৮৯" pattern="[\d\u09E6-\u09EF]+">
  <input type="submit" value="check">
</form>

Demo 2: JS validation with RegExp test()

document.getElementById('myform').addEventListener('submit', function(event)
{
  if(!/^[\d\u09E6-\u09EF]+$/g.test(document.getElementById('myinput').value))
  {
    alert('Please enter just Latin and Bengali digits!');
    event.preventDefault();
  }
});
<form id="myform">
  <input id="myinput" type="text">
  <input type="submit" value="test">
</form>

Upvotes: 1

Suzy
Suzy

Reputation: 24

Try to use regular expression. ^[০-৯0-9]+$
input type should be text as well

        <!DOCTYPE html>
        <html>
         <body>    

         <button onclick="myFunction()">Try it</button>
          <input type="text" id="numeric">
          <p id="demo"></p>

          <script>
             function myFunction() {
               var str = document.getElementById('numeric').value;
               var reg = new RegExp('^[০-৯0-9]+$');
               var result = reg.test(str);
               document.getElementById("demo").innerHTML = result;
            }
         </script>

       </body>
       </html>

Upvotes: 0

nick zoum
nick zoum

Reputation: 7315

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

Upvotes: 5

Narbhakshi
Narbhakshi

Reputation: 392

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>

Upvotes: 2

Jaydeep Mor
Jaydeep Mor

Reputation: 1703

I have checked [০-৯0-9] pattern but seems not working. So, by using javascript's onkeydown event you may achieve your goal.

function validateNumber(event)
{
    var unicode = event.keyCode ? event.keyCode : event.charCode;

    /* For Numbers. */
    if ((unicode >= 48 && unicode <= 57) || (unicode >= 96 && unicode <= 105)) {
    	return true;
    }

    /* For other keys that might allowed like [Backspace]. */

    /*
        8:  Backspace
        9:  Tab
        27: Escape
        35: End
        36: Home
        37: Left Arrow
        39: Right Arrow
        45: Insert
        46: Delete
    */
    var allowedKeys = [8, 9, 27, 35, 36, 37, 39, 45, 46];

    return (allowedKeys.indexOf(unicode) >= 0);
}
Input: <input type="text" onkeydown="return validateNumber(event);">

Hopefully may it will help someone !

Upvotes: 1

Related Questions