目前我有以下代码

<input type="number" />

结果是这样的

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

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


当前回答

如果需要文本输入,该模式也可以工作

<input type="text" pattern="\d+">

其他回答

我找不到完美的解决方案,因为有些工作是输入,但不是复制和粘贴,有些是相反的方式。这个解决办法对我很管用。它防止负数,输入“e”,复制和粘贴“e”文本。

创建一个函数。

<script language="JavaScript">

  // this prevents from typing non-number text, including "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }
</script>

将这些属性添加到输入中。这两个可以防止复制和粘贴非数字文本,包括“e”。你需要同时拥有两者才能生效。

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

如果你正在使用Vue,你可以参考这里的答案。我已经将它提取到一个可以重用的mixin中。

通过在输入标记中添加onkeypress,可以强制输入只包含正整数。

<input type=“number” onkeypress=“return event.charCode >= 48” min=“1” >

在这里,事件。charCode >= 48确保只返回大于或等于0的数字,而min标记确保通过在输入栏内滚动可以得到最小值1。

如果需要文本输入,该模式也可以工作

<input type="text" pattern="\d+">

添加一个min属性

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

我认为使用类型文本是最好的,而不是数字,因为使用类型=数字,你将面临一些问题,如输入字段的方向键和上、下键的值变化。


<input type="text" onkeypress="return event.charCode>=48 && event.charCode<=57" />