テキストボックスの入力値を「半角数字だけ」かつ「1から100まで」に限定させる方法

Question

###実現したいこと
タイトルの通りですが、半角数字だけ入力可能で、その数字を１から100までに限定するjQueryについて教えてください。
###該当のソースコード
こちらのテキストボックスです。

<input type="text" id="number" min="1" max="100"/>

###試したこと
コメントアウトしてあるように、キーボードの番号で値を判定し、maxとminで範囲を判定している流れです。

しかし、ひらがなが入力できてしまうことと、数字が入力できないことが問題で、実現したいことができません。

$('#number').on('input keyup keydown', function(e) {
  
  // 入力できる価
  var k = e.keyCode;
  // 0～9, テンキ―0～9, backspace, delete, →, ←, を許可
  if(!((k >= 48 && k <= 57) || (k >= 96 && k <= 105) || k == 8 || k == 46 || k == 39 || k == 37)) {
    return false;
  }
  
  // 入力できる範囲 
  var that = $(this);
  var max = that.attr("max");
  var min = that.attr("min");    
  var val = that.val();
  if( val >= max || val <= min ){
    return false;
  }

});

JavascriptではなくjQueryで知りたいです。お手数おかけしてすみませんが、宜しくお願い致します。

Comments

[yoshinavi]

「HTML4.01まで」が対象で「HTML5」は除外なのでしょうか？

[maronica]

いいえ。そんなことはありません。

[yoshinavi]

「asahina1979」さんの回答のように<input>は、type属性で指定の方が、HTMLのみで制御出来ますので簡単かと思います。

[maronica]

ありがとうございます。

Answer 1

？名称で制御されるのではなく type で制御が変わるんですが・・・・・

<input type="number" min="1" max="100">

Comments

[maronica]

半角数字だけ入力可能で、その数字を１から100までに限定したいのでｄすが、typeの変更は特にその目的に寄与しないですよね。

[Take_it]

type=number
が、半角数字(というか数値データ)に限定するためのものですよ。
むしろそれだけやっとけばscriptで制御する必要なんて(現行ブラウザが相手なら)ない。
というかinput type でググれば。
正直ここで質問するレベルの話ではないですよ。

[退会済みユーザー]

古いブラウザ ( IE 6 for XP SP3)ででもテストしてるのですかね？

Answer 2

HTML5や、熟考した者ら、目に涙

document.getElementById ('inp').addEventListener ('input', (a)=> {
  let e=a.target,v=e.value.replace(/^\s|^0|\s$|\D/g,'');
  [,e.value]=/^((?!100)[1-9][0-9]|100)([0-9]+)/.exec(v)||[,v];
}, false);
</script>

Comments

[maronica]

ありがとうございます。すみません、jQueryで知りたかったです…

[FKM]

jQueryはこのaddEventListenerを定義化したメソッドにしているだけですよ。なので
$('#inp').input(…　に変えるだけです。

また、JQueryはjavascriptのライブラリに過ぎないので、普通にaddEventListenerは使えます。

[maronica]

ありがとうございました。