Question

目前我有以下代码

<input type="number" />

它出现了类似的东西

enter image description here

右侧的小选择器允许数字变为负数。我该如何预防？

我对使用type="number"有疑问，它造成的问题多于解决问题，无论如何我都会理智地检查它，所以我应该回到使用type="text"吗？

Answer 1

添加a min attribute

<input type="number" min="0">

Answer 2

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

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

Answer 3

这取决于你想要的精确程度。它只想接受整数：

<input type="number" min="1" step="1">

如果你想要浮点数，例如，小数点后两位数：

<input type="number" min="0.01" step="0.01">

Answer 4

您可以通过在onkeypress标记中添加input来强制输入仅包含正整数。

＆＃13;

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

＆＃13;

此处，event.charCode >= 48确保仅返回大于或等于0的数字，而min标记确保您可以通过在输入栏内滚动来达到最小值1。

Answer 5

您可以通过以下方法将负输入变为正数：

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

Answer 6

您可以使用以下方法使type="number"仅接受正数：

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

Answer 7

尝试

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

Answer 8

我找不到完美的解决方案，因为有些输入工作而不是复制粘贴工作，而有些则相反。这个解决方案对我有用。它可以防止输入负数，键入“ 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 you can refer this answer here。我已经将其提取到可以重复使用的mixin中。

Answer 9

如果您尝试输入一个负数，onkeyup事件将阻止该事件，如果您在输入数字上使用箭头，则onblur事件将解析该部分。

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

Answer 10

在输入类型中添加此代码;

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

例如：

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

Answer 11

其他解决方案是使用Js使其为正（当用户键入smth时，可以禁用min选项，并且该选项无效）。也可以使用负（如果不需要）和on（'keydown'）事件！

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

Answer 12

这取决于您要的是int还是float字段。这是两者的外观：

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

由于int字段的最小值为1，因此附加了正确的验证。要解决此问题，您可以再添加一个constraint validator：

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

JSFiddle here.

请注意，这些解决方案均不能完全阻止用户尝试输入无效的输入，但是您可以调用checkValidity or reportValidity来确定用户是否输入了有效的输入。

当然，您仍然应该具有服务器端验证，因为用户始终可以忽略客户端验证。

Answer 13

尝试一下：

在Angular 8中测试
值是正数
此代码还处理null和negitive值。

              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />

Answer 14

(function ($) {
  $.fn.inputFilter = function (inputFilter) {
    return this.on('input keydown keyup mousedown mouseup select contextmenu drop', function () {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty('oldValue')) {
        this.value = this.oldValue;
        //this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = '';
      }
    });
  };
})(jQuery);

$('.positive_int').inputFilter(function (value) {
  return /^\d*[.]?\d{0,2}$/.test(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="positive_int"/>

以上代码对所有人都适用！！！而且这还将防止插入两个以上的小数点。而且，如果您不需要这样做，只需删除\ d {0,2}，或者如果需要更多有限的小数点，只需更改数字2

Answer 15

使用文本类型的输入，您可以使用它来进行更好的验证，

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

Answer 16

＆＃13;

<input type="number" min="1" step="1">

＆＃13;

Answer 17

如果需要输入文本，该模式也将起作用

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

Answer 18

尝试一下：

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}

如何仅将type =“number”设为正数

18 个答案: