禁止在html5中的数字字段中输入字母

Question

我想阻止用户在HTML5中的电话号码的文本字段中输入非数字字符。我试过这个，但它不禁止非数字字符：

<input type="tel"  name="usrtel"><br>

我也尝试使用type=number，但这会给我一个向上和向下箭头来增加或减少该值，这对电话号码没用。我怎么能做到这一点？

Answer 1

您可以将pattern属性与正则表达式\d*

一起使用

<input type="tel" name="usrtel" pattern="\d*" />

Demo（在框中输入后，只需点击框外的任何位置，如果您输入除整数之外的任何内容，它将显示一个红色框，否则它将保持正常 ）

Demo 2（使用自定义消息和提交按钮）

---

在您评论时，您可以将pattern值更改为^[0-9]{3,45}$，其中用户必须输入最少 3 位数，最多 45 长度。

Demo

<input 
      type="tel" 
      name="usrtel" 
      pattern="^[0-9]{3,45}$" 
      title="You can only enter numbers, with a minimal of 3 characters 
      upto 45 characters are accepted."
      required="required" 
/>

在上面的标记中，我使用title会向您的用户抛出自定义错误。