html - 如何在没有Javascript的情况下仅强制输入数字？

Question

代码笔： http ://codepen.io/leongaban/pen/hbHsk

我在这里和这里的堆栈上找到了这个问题的多个答案

但是，他们都建议使用相同的修复方法type="number"或type="tel"

这些都不适用于我的代码笔或项目:(

你看到我错过了什么吗？

Answer 1

首先，你用的是什么浏览器？并非所有浏览器都支持 HTML5 输入类型，因此如果您需要支持可能使用旧浏览器的用户，那么您不能依赖适用于所有用户的 HTML5 输入类型。

其次，HTML5 输入验证类型不会阻止您输入无效值；他们只是在输入后对输入进行验证。作为开发人员，您应该通过使用 CSS 或 JS 来确定字段输入是否无效，并酌情将其标记给用户来处理此问题。

如果您确实想防止非数字字符进入该字段，那么答案是肯定的，您需要使用 Javascript（最好的选择是将其捕获在keyUp事件中）。

您还应该小心确保您在客户端上执行的任何验证也会在服务器上复制，因为任何客户端验证（无论是通过 HTML5 输入字段还是通过您自己的自定义 javascript）都可能被恶意用户绕过。

Answer 2

它不会阻止您输入，但会使输入无效。如果添加以下样式，您可以看到：

input:invalid {
  border:1px solid red;
}

Answer 3

我使用了一些肮脏的 JS 内联，它是在粘贴/键入（输入）时触发的。

在您的输入标签中添加以下内容：

oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"

它所做的只是用任何内容替换任何不是 0-9 的字符。

我写了一个小演示，您可以在下面尝试：

Numbers only: <input oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"></input>

Answer 4

首先，在您的 Codepen 中，您的输入在表单中的格式不正确......尝试添加这样的<form></form>标签：

<form>
<lable>input 1 </lable>
<input type='tel' pattern='[0-9]{10}' class='added_mobilephone' name='mobilephone' value='' autocomplete='off' maxlength='20' />

<br/>

<lable>input 2 </lable>
<input type="number" pattern='[0-9]{10}'/>

<br/>

<lable>input 3 </lable>
<input type= "text" name="name" pattern="[0-9]"  title="Title"/>
</form>

Answer 5

只需在onkeypress事件中添加一个检查以确保不能添加任何字母数字字符

 <input 
     type="text" 
     placeholder="Age" 
     autocomplete="off" 
     onkeypress="return event.charCode >= 48 && event.charCode <= 57" 
     maxlength="10" 
 />