仅正整数的 HTML 输入（类型=数字）

Question

我找不到合适的正则表达式模式，尽管这类问题有很多。

我不希望用户能够打字或输入

<td><input type="number" pattern=" 0+\.[0-9]*[1-9][0-9]*$" name="itemConsumption" /></td>

1. -1.0（负值）
2. 字符串值和任何字符
3. 1.0（十进制值）
4. 无范围限制

我只想接受正整数

已解决 不需要正则表达式，我不知道这个：D

<td><input type="number" pattern=" 0+\.[0-9]*[1-9][0-9]*$" name="itemConsumption" onkeypress="return event.charCode >= 48 && event.charCode <= 57"</td> 

Answer 1

要禁止除数字以外的任何输入，您可以使用

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

<form id="mfrm">
<table>
    <tr>
        <td>Enter number only: <input type="text" name="itemConsumption" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" /></td>
        <td><input type="Submit"/></td>
    </tr>
</table>

这里，event.charCode == 8 || event.charCode == 0 || event.charCode == 13 条件处理按下 DELETE、BACKSPACE 或 ENTER 键的情况（对于 Firefox 很重要，请参阅下面的Mohit's comment 和与启用 ENTER 键相关的datashaman's comment）。

event.charCode >= 48 && event.charCode <= 57 表示仅返回 0（十进制代码 48）和所有其他不超过 9 的数字（十进制代码 57）。

Answer 2

您可以使用 type、min 和 oninput

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

<form>
<label>Input with positive numbers only</label><br/><br/>
<input type="number" min="0" step="1" oninput="validity.valid||(value='');">
</form>

Answer 3

要只允许数字值，您可以使用如下：

<td><input type="number" pattern="\d+" name="itemConsumption" /></td>

Answer 4

如果涉及到 HTML5，那么你可以试试min 属性：

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

Answer 5

我尝试了很多不同的解决方案来实现这一点，最后我想出了这个，它完美地为我们完成了这项工作。它适用于打字和复制/粘贴，我找不到任何不需要的副作用。

<form>
    <input
        type="number"
        min="0"
        step="1"
        onfocus="this.previousValue = this.value"
        onkeydown="this.previousValue = this.value"
        oninput="validity.valid || (value = this.previousValue)"
    />
</form>

类似于 Nikhil Mahirrao 的解决方案，但它会导致无效的击键被简单地忽略而不清空输入。

Answer 6

您可以将此正则表达式模式用于整数 [0-9]* 或 \d* [0-9] 是您可以输入 0 到 9 的范围，* 表示不期望任何数字，或者您可以输入无限数字

Answer 7

也许this jQuery Codepen snipet 会对某人有所帮助。 它用于 type="number"（不是 "text"）：

<input class="js-input-absint" type="number" step="1" min="18"  max="150" name="age" value="50">

只有 [0-9] 允许输入。在输入中将仅打印/粘贴具有最小-最大范围的数字 [0-9]（可选）。

一些解释：代码在输入阶段只显示数字，并且在输入无效数字值的情况下不会将值重置为“”（空），就像默认情况下为 type="number" 所做的那样。而且您不能将属性 pattern="/^[0-9]*$/" 用于输入 type="number"。

var $inputAbsint = $('.js-input-absint');

if ($inputAbsint.length) {

  $(document).on('keypress', '.js-input-absint', function (event) {

    var allowed = /^[0-9]|Arrow(Left|Right)|Backspace|Home|End|Delete$/;
    return allowed.test(event.key);

  }).on('focusout paste', '.js-input-absint', function () {

    var $input = $(this);
    var defaultValue = this.defaultValue || $input.attr('min');
    // Important(!): Timeout for the updated value
    setTimeout(function () {
        var current = $input.val();
        var regexNumbers = new RegExp(/^[0-9]*$/, 'g');
        var isNumbersOnly = regexNumbers.test(current);
        // Clear wrong value (not numbers)
        if ((current === '' || !isNumbersOnly) && defaultValue.length) {
            $input.val(defaultValue);
            current = defaultValue;
        }
        // Min/Max
        var min = parseInt($input.attr('min'), 10);
        var max = parseInt($input.attr('max'), 10);
        var currentInt = parseInt(current, 10);
        if (!isNaN(min) && !isNaN(currentInt) && currentInt < min) {
            $input.val(min);
        }
        if (!isNaN(max) && !isNaN(currentInt) && currentInt > max) {
            $input.val(max);
        }
    }, 100);

  });

}

Answer 8

您不能按键盘上的“-”按钮。

<!--HTML Code is below-->
<input type="text" name="value1" id="value1" class="form-control" required="required" onkeyup="keyCode(event)">

<!--JQuery Code is below-->
<script>
       $(document).ready(function() {
        $value1.on("keyup", function keyCode(event){
            var x = event.keyCode;
            if (x == 109 || x == 189) {
                event.preventDefault();
                alert ("You can't enter minus value !");
            }
        });
      });
</script>

“109”键码代表键盘的数字侧减号按钮。 '189'的键码代表字符按钮上方的减号按钮。

Answer 9

Nikhil Mahirrao 的回答优雅而简短！

我想要类似的东西，但是该字段不应反弹回空字符串，但另外只需忽略任何不是数字的输入。此外，应过滤前导零。

... oninput="filterNonNumbers(this)" ...

function filterNonNumbers(inputElement) {
    let valOriginal = inputElement.value;
    let valFiltered = valOriginal.split('').filter(c => c.charCodeAt(0) >= 48 && c.charCodeAt(0) <= 57 ? c : '').join('').replace(/^0+/, '');
    if (valOriginal !== valFiltered) {
        inputElement.value = valFiltered;
    }
}

当然，在直接输入和通过剪贴板粘贴时，它就像 Nikhil 的代码一样工作。

也许有人有类似的扩展要求。