html - Input type=number Safari 仍然允许带步进器的字母

Question

我有一个输入框，它只允许数字:

<input class="border" type="number" numeric step="0.1" inputmode="numeric" digitOnly maxlength="6" formControlName="resultInput" pattern="[0-9]+"/>

我设置了比需要更多的参数，只是为了检查它是否适用于这些参数。不幸的是它没有。当我在 Chrome 上使用它时它有效，但当我在 Safari 上使用它时它不起作用。

Answer 1

不幸的是，许多浏览器只会在提交表单时验证带有 type="number" 的 input 的输入。在这种情况下，将出现以下提示(以 Safari 为例):

我已经修改了您的代码段以删除输入的所有非数字输入。我已经测试过此代码段适用于 Chrome、Firefox 和 Safari。

<input class="border" type="number" numeric step="0.1" inputmode="numeric" digitOnly maxlength="6" formControlName="resultInput" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />

如果您愿意放弃步进器，则可以避免让单个非数字字符删除整个输入:

<input class="border" type="text" inputmode="numeric" digitOnly maxlength="6" formControlName="resultInput" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />

在这些片段中，我们使用:

oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" 

删除所有会导致 input 中的值与典型数字形式不匹配的字符(没有前导零，不超过一位小数)。

请注意:虽然您可以使用 HTML、CSS 和 JavaScript 来限制用户在正常使用您的网站时输入的内容(称为“客户端验证”)，但绕过以这种方式设置的限制是微不足道的。

如果您要将此数据发送到服务器进行转换，您不应该相信此数据只会是数字并且具有您期望的形式。您应该将这种类型的验证视为纯粹是为了方便，而不是为服务器将接收有效数据提供任何保证。