javascript - Why does input[type='tel'] allow non-numerical characters to be entered? - Stack Overflow

admin管理员组

文章数量:1356860

Why does the input field allow alphabetic characters and not restrict the input to only numbers?

<input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}">

Why does the input field allow alphabetic characters and not restrict the input to only numbers?

<input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}">

• javascript
• html
• validation
• input

Share Improve this question Follow asked Sep 25, 2021 at 19:38 BrendoBrendo 7111 silver badge44 bronze badges 3

• 3 type=tel is only used to bring up the numpad on supported devices and browsers. It does not perform any validation / restriction on user input – Manos Kounelakis Commented Sep 25, 2021 at 19:45
• Maybe for country code (+44) and area code (444) syntax. – HelpingHand Commented Sep 25, 2021 at 19:45
• 1 It's all explained in the documentation. – Andy Commented Sep 25, 2021 at 19:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

It does not restrict the types of characters that can be input, but browsers will prevent submission if the input value does not match your pattern.

If you do not want to allow certain character inputs, you can use JavaScript to remove those characters: onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');".

input:invalid {
    color: red;
}

<form>
    <input type="tel" id="phone" name="phone_number" placeholder="555-555-5555" pattern="\d{3}-\d{3}-\d{4}" onkeyup="this.value = this.value.replace(/[^0-9-]/g, '');">
    <input type="submit" value="Submit">
</form>

https://developer.mozilla/en-US/docs/Web/HTML/Element/input/tel

Andy's link to the documentation had the answer I was looking for.

the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world

Because many country use char in the phone numbers like ’+-()’ space etc.

本文标签： javascriptWhy does inputtype39tel39 allow nonnumerical characters to be enteredStack Overflow