web-dev-qa-db-ja.com

フォーム入力type = "number"での負の入力を防止しますか？

ユーザー入力をHTML形式の正数に制限したい。

Min = "0"を設定できることは知っていますが、負の数を手動で入力することでこれを回避することができます。

検証関数を作成せずにこれを解決する他の方法はありますか？

htmlhtml5formsinputnumbers
33
Ali

これはJavascriptを使用しますが、独自の検証ルーチンを作成する必要はありません。代わりに、validity.validプロパティを確認してください。これは、入力が範囲内にある場合にのみ当てはまります。

<html>
<body>
<form action="#">
  <input type="number" name="test" min=0 oninput="validity.valid||(value='');"><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>
72
Mikel Rychliski

これは、入力の値を検証しないと不可能です。

input type = number

値が「number」であるtype属性を持つinput要素は、要素の値を数値を表すstringに設定するための正確なコントロールを表します。

これは数値を表す文字列であるため、文字列が数値を表しているかどうかを確認する方法はありません。

許可された属性では、数値入力コントロールの値を検証することはできません。

JavaScriptを使用してこれを行う1つの方法は、次のようになります。

// Select your input element.
var numInput = document.querySelector('input');

// Listen for input event on numInput.
numInput.addEventListener('input', function(){
    // Let's match only digits.
    var num = this.value.match(/^\d+$/);
    if (num === null) {
        // If we have no match, value will be empty.
        this.value = "";
    }
}, false)
<input type="number" min="0" />

サーバーへのデータ送信を計画している場合は、サーバー上のデータも検証してください。クライアント側のJavaScriptは、送信されるデータが期待どおりであることを保証できません。

31
DavidDomain

デフォルト値、すなわち最小値、またはその他の値を確保したい場合、これは有効なソリューションです。これは、入力フィールドをクリアすることも妨げています。同様に、最大値に設定することもできます。

<input type="number" min="1" max="9999" maxlength="4" oninput="this.value=this.value.slice(0,this.maxLength||1/1);this.value=(this.value   < 1) ? (1/1) : this.value;">
3
user7135197

type="number"は、ここで他の回答が指摘しているように、数字のみの入力を許可することを既に解決しています。

参照用：jQueryでは、次のコードでフォーカスアウトの負の値を上書きできます。

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

これはサーバー側の検証に代わるものではありません！

1
Hafenkranich

次のスクリプトでは、数字またはバックスペースのみを入力に入力できます。

var number = document.getElementById('number');

number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}
<input type="number" id="number" min="0">
1
user4639281