如何仅将type ="number"设为正数
目前我有以下代码
<input type="number" />
它出现了这样的事情
右侧的小选择器允许数字变为负数.我该如何预防呢？
我对使用有疑问type="number",它造成的问题多于解决问题,无论如何我都会理智地检查它,所以我应该回去使用type="text"？
Que*_*tin 571
添加一个min属性
<input type="number" min="0">- 你仍然可以输入负数是荒谬的. (71认同)
- @Pavlo - 这是非常极端的挑剔.如果不想要"0",那么很明显如何改变它.问题还表明问题是数字变为负数. (53认同)
- 这适用于选择器箭头,但允许键入负数 (21认同)
- 在大多数情况下,将属性更改为"min ="0.000001"`将有所帮助.超过6位小数,JavaScript会将其转换为指数格式. (2认同)
- @DavidBurton是的，这是正确的，但单击“提交”按钮运行验证，然后浏览器抱怨负数并阻止提交表单。但感谢您的评论，因为我现在明确地测试了它。 (2认同)
Kus*_*hal 93
我找到了另一种防止负数的解决方案.
<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">
- 应该将其标记为有效答案，因为它还会阻止键入“-”字符 (3认同)
- 你不能用这个添加浮点数。此外，数字步进器在这里也不起作用。 (2认同)
- `oninput="validity.valid||(value='');"` 停止输入数字 (2认同)
Pav*_*vlo 72
这取决于你想要的精确程度.它只想接受整数,而不是:
<input type="number" min="1" step="1">如果你想要浮点数,例如,小数点后两位数:
<input type="number" min="0.01" step="0.01">- 这不会阻止输入错误的值 - 如果省略步骤值chrome会减少键入时的验证,因此您可以输入非数字值.使用步进设置,它只允许您键入最小 - 最大范围之外的值 - 仍然是错误的,但更好. (3认同)
- 第1步是浏览器默认的，没问题 (2认同)
Shu*_*tal 39
您可以通过onkeypress在input标记内添加来强制输入仅包含正整数.
<input type="number" onkeypress="return event.charCode >= 48" min="1" >在此处,event.charCode >= 48确保仅返回大于或等于0的数字,而min标记确保您可以通过在输入栏内滚动来达到最小值1.
- 您仍然可以粘贴负数 (7认同)
- 在Edge上，您可以在其中输入“ A”。 (2认同)
Haf*_*kib 14
您可以通过以下方式将负输入转换为正数：
<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">您可以使用以下内容使type="number"只接受正数：
input type="number" step="1" pattern="\d+"
- 你能试着解释一下你的陈述有什么作用以及它为什么有帮助吗？此外，您有两个不同的片段。哪一个是正确的？ (2认同)
- 通过添加 step 属性，您将输入限制为整数并添加模式可确保任何小数部分的使用都会将该字段标记为无效，但取决于浏览器的实现（Firefox 在输入失去焦点时将该字段标记为红色，而 Chrome 不允许您首先输入了不允许的值）。应该在服务器/客户端上验证这一点。 (2认同)
尝试
<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">
- 在chrome中尝试过这个,并没有强制执行模式 (9认同)
如果您尝试输入负数，onkeyup 事件会阻止此操作，如果您在输入数字上使用箭头，onblur 事件会解决该部分。
<input type="number"
onkeyup="if(this.value<0)this.value=1"
onblur="if(this.value<0)this.value=1"
>