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，这将向您的用户抛出自定义错误。