【保存版】HTMLフォームの入力値をバリデーション！input type="number" の負の値対策
2024-04-13
HTMLのinput type="number"で負の値を入力できないようにする方法
方法 1: min属性を使う
input type="number"には、min属性を使って、入力できる最小値を指定することができます。min属性に0を指定すれば、負の値を入力できなくなります。
<input type="number" min="0">
方法 2: oninputイベントを使う
oninputイベントは、入力値が変更されるたびに発生するイベントです。このイベントを使って、入力値が負の場合に、0にリセットすることができます。
<input type="number" oninput="if (this.value < 0) this.value = 0">
方法 3: jQueryを使う
jQueryを使うと、より簡単にinput type="number"で負の値を入力できないようにすることができます。
<input type="number" id="myInput">
<script>
$(document).ready(function(){
$("#myInput").on("input", function(){
if ($(this).val() < 0) {
$(this).val(0);
}
});
});
</script>
補足
- 上記の方法は、あくまでも例です。ご自身の目的に合わせて、自由にカスタマイズしてください。
- どうしても負の値を入力できるようにしたい場合は、
min属性に負の値を指定することができます。
HTML
<!DOCTYPE html>
<html>
<head>
<title>input type="number" で負の値を入力できないようにする</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>input type="number" で負の値を入力できないようにする</h1>
<p>以下のフォームに入力してみてください。</p>
<form>
<label for="myInput">数値を入力してください:</label>
<input type="number" id="myInput" min="0">
<button type="submit">送信</button>
</form>
<script>
document.getElementById('myInput').addEventListener('input', function() {
if (this.value < 0) {
this.value = 0;
}
});
</script>
</body>
</html>
CSS
/* CSSは必要ありません */
JavaScript
document.getElementById('myInput').addEventListener('input', function() {
if (this.value < 0) {
this.value = 0;
}
});
説明
このコードは、以下のことを行います。
- HTMLで、
input type="number"要素と送信ボタンを作成します。 - CSSで、フォントを設定します。
- JavaScriptで、
input type="number"要素にinputイベントリスナーを追加します。 - イベントリスナー内で、入力値が負の場合に、0にリセットします。
このコードを実行すると、以下のようになります。
入力値が負の場合、自動的に0にリセットされます。
HTMLのinput type="number"で負の値を入力できないようにするその他の方法
step属性を使って、入力できる値のステップを指定することができます。step属性に1を指定すれば、入力できる値は1ずつ増減することになり、負の値を入力できなくなります。
<input type="number" min="0" step="1">
pattern属性を使って、入力できる値の形式を指定することができます。pattern属性に正規表現を指定して、負の値を禁止することができます。
<input type="number" min="0" pattern="[0-9]+">
方法 3: 制限付き入力ライブラリを使う
input type="number"の入力を制限するライブラリもいくつかあります。これらのライブラリを使うと、より簡単に、より多くの機能を備えた入力を制限することができます。
html input numbers
