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

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

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

https://developer.mozilla.org/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