接受手机号码的输入栏

Question

I want to get mobile number as input of different countries. I tried using below code:

 <input type="tel" minlength="8" maxlength="10" name="Number" id="Number" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" class="form-control wow fadeInUp" placeholder="* WhatsApp Number" required/>

But it also accepts characters, so how can i apply length validation and number validation .

Answer 1

this code will prevent character to be typed. While typing anything except numbers are omitted.

 <input type="tel" required minlength="8" maxlength="15" name="Number" id="Number" class="form-control wow fadeInUp" placeholder="* WhatsApp Number" oninput="this.value = this.value.replace(/[^0-9+()]/g, '');" pattern=".{8,10}" placeholder="123-45-678" />