web-dev-qa-db-ja.com

正の整数のみのHTML入力（Type = number）

この種の質問はたくさんありますが、これに適した正規表現パターンは見つかりません。

ユーザーが入力または入力できるようにしたくない

<td><input type="number" pattern=" 0+\.[0-9]*[1-9][0-9]*$" name="itemConsumption" /></td>
  1. -1.0（負の値）
  2. 文字列値と任意の文字
  3. 1.0（10進数値）
  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>
htmlregexhtml5validation
15
SCS

数値以外の入力を許可するには、次を使用できます。

<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のコメント およびENTERキーの有効化に関する datashamanのコメント を参照してください）。

event.charCode >= 48 && event.charCode <= 57は、0（10進コード48）と最大9（10進コード57）までのすべての数字のみが返されることを意味します。

31
Wiktor Stribiżew

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>
5
Nikhil Mahirrao

数値のみを許可するには、次のように使用できます。

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

HTML5の場合は、 min 属性を試してください：

<input type="number" min="0">
4
Oleksii Trekhleb

この正規表現パターンは、整数[0-9] *または\ d *に使用できます。[0-9]は0〜9を入力できる範囲で、*は数字を予期しないか、無限の数字を入力できることを意味します。

0
Ashoke Kumar

多分 この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"のデフォルトのように無効な数値を入力した場合に値を ""（空）にリセットしません。また、入力type = "number"に属性pattern = "/ ^ [0-9] * $ /"を使用することはできません。

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);

  });

}
0
Konstantin Petlya

キーボードの「-」ボタンを押すことはできません。

<!--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」のキーコードは、文字ボタンの上にあるマイナスボタンを表します。

0
earlcan