如何使type="number"为正数

目前我有以下代码

<input type="number" />

结果是这样的

右边的选择器允许数字变为负数。我该如何预防呢?

我对使用type="number"有疑问，它造成的问题比它解决的要多，我无论如何都要检查它，所以我应该回到使用type="text"吗?

当前回答

尝试这个选项，并给出最小值和最大值

<输入类型=“数字” 模式=“\d+” 输入模式=“数字” 值=“123” 自动完成=“关闭” 最大长度=“5” 步骤=“1” min=“0” max=“99999” >

其他回答

添加一个min属性

<输入类型=“数字” min=“0”>

如果您尝试输入负数，onkeyup事件将阻止此操作，如果您在输入数字上使用箭头，onblur事件将解决此部分。

<输入类型=“数字” onkeyup=“if（this.value<0）this.value=1” onblur=“if（this.value<0）this.value=1” >

这个解决方案可能看起来有点多余，但它照顾到了每个方面。

在表单中使用this

<input type="number" min="0" (keypress)="onlyDigits($event)" >

在。ts中定义函数

onlyDigits(event) {
   let code = event.charCode;
   return (code >= 48 && code <= 57);
}

这确保箭头只输入正数。它还可以防止输入任何非数字字符(包括'-'，'+'和'e')

你可以使用以下命令使type="number"只接受正数:

<input type="number" step="1" pattern="\d+">

我已经找到了防止负数的另一种解决方案。

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">

推荐文章