我有一个输入框,它只允许数字:
<input class="border" type="number" numeric step="0.1" inputmode="numeric" digitOnly maxlength="6" formControlName="resultInput" pattern="[0-9]+"/>
我设置了比需要更多的参数,只是为了检查它是否适用于这些参数。不幸的是它没有。 当我在 Chrome 上使用它时它有效,但当我在 Safari 上使用它时它不起作用。
最佳答案
不幸的是,许多浏览器只会在提交表单时验证带有 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 来限制用户在正常使用您的网站时输入的内容(称为“客户端验证”),但绕过以这种方式设置的限制是微不足道的。
如果您要将此数据发送到服务器进行转换,您不应该相信此数据只会是数字并且具有您期望的形式。您应该将这种类型的验证视为纯粹是为了方便,而不是为服务器将接收有效数据提供任何保证。
关于html - Input type=number Safari 仍然允许带步进器的字母,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59654216/