<input type="number">で負の数のキーボード入力を許さない方法。

Question

いつもお世話になっております。

<input type="number">で負の数の入力を許さないためにはどうすれば良いでしょうか。
min="0"とすることで、プルダウンで負にならないようにすることはできましたが、
キーボードでは負の数を直接入力が出来てしまいます。
よろしくお願いいたします...！

                <input
                  name=""
                  className="input_field"
                  type="number"
                  min="0"
                  style={{ width: 90 }}
                  />

Comments

[退会済みユーザー]

ブラウザは何ですか？　ブラウザによって動きが違いますが認識されてますか？

[a_ys]

chromeです

[退会済みユーザー]

質問欄を編集してそれを書いてください。

Answer 1

type=numberはブラウザによって解釈が異なるようです
textの方が汎用的に処理ができるかもしれません

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.input_field').forEach(x=>{
    x.addEventListener('input',()=>{
      var reg=/[^0-9]/g;
      var val=x.value;
      if(reg.test(val)){
        x.value=val.replace(reg,'');
      }
    });
  });
});
</script>
<input name="hoge" class="input_field" type="text">
<input name="fuga" class="input_field" type="text">

Answer 2

HTML5のinputタグではpatternのパラメータをつけることで正規表現でバリデーションできるようになります。例えば<input type="number" pattern="^[0-9]+$" />とすれば数字のみが許可され、-などを含むと送信できなくなります。
ただし、他の方が言われているように正しく機能しないブラウザとバージョンがあります。完璧にすべてのブラウザで動作するようにしたいのであればJavaScriptでのバリデーションをおすすめします。

patternの書き方などはこのページが参考になります。
HTML5におけるinput要素のpattern、type属性のおさらい - Qiita
https://qiita.com/ka215/items/795a179041c705bef03b

対応しているブラウザとバージョンは次のページが参考になります。
Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/#feat=input-pattern

Answer 3

htmlだけでなんとかするよりJavaScriptで入力監視してチェック入れた方が確実性は高いと思います。

※それでも入力値保存などがサーバー側で発生するのでしたらサーバー側でのバリデートは必須です