<code>input[text="number"]</code>が使いにくいので、<code>input[text="text"]</code>で代用する方法。 
pattern属性が思いの外優秀で、目から鱗。 
<code>pattern="0|[1-9][0-9]{0,1}|100"</code>　で、 0 ~ 100 などを制御出来たので、 
シェアします。
<h2 id="codesandbox">
<a class="header-anchor-link" href="#codesandbox" aria-hidden="true"></a> codesandbox</h2>
<iframe id="zenn-embedded__fc8d1db8b0661" src="https://embed.zenn.studio/card#zenn-embedded__fc8d1db8b0661" data-content="https%3A%2F%2Fcodesandbox.io%2Fp%2Fsandbox%2Finput-pattern-cn4j5v%3Ffile%3D%252Findex.html" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://codesandbox.io/p/sandbox/input-pattern-cn4j5v?file=%2Findex.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://codesandbox.io/p/sandbox/input-pattern-cn4j5v?file=%2Findex.html</a>
<h2 id="%E3%82%B3%E3%83%BC%E3%83%89">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%BC%E3%83%89" aria-hidden="true"></a> コード</h2>
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
 &lt;title&gt;HTML + CSS&lt;/title&gt;
 &lt;link rel="stylesheet" href="styles.css" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;h1&gt;
 input[text="text"]とpattern属性でinput[text="number"]の代わりを実装する
 &lt;/h1&gt;
 &lt;h3&gt;number&lt;/h3&gt;
 &lt;form id="form1"&gt;
 &lt;input
 style="width: 200px"
 type="number"
 name="age"
 required
 min="0"
 max="100"
 placeholder="年齢必須　0~100歳まで"
 /&gt;
 &lt;input type="submit" name="submit" disabled /&gt;
 &lt;/form&gt;
 &lt;h3&gt;text &amp; pattern&lt;/h3&gt;
 &lt;form id="form2"&gt;
 &lt;input
 style="width: 200px"
 type="text"
 name="age"
 required
 pattern="0|[1-9][0-9]{0,1}|100"
 maxlength="3"
 placeholder="年齢必須　0~100歳まで"
 /&gt;
 &lt;input type="submit" name="submit" disabled /&gt;
 &lt;/form&gt;

 &lt;script&gt;
 const form1 = document.getElementById("form1");
 form1.addEventListener("input", function (e) {
 this.submit.disabled = !this.checkValidity();
 });
 const form2 = document.getElementById("form2");
 form2.addEventListener("input", function (e) {
 this.submit.disabled = !this.checkValidity();
 });
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

</code></pre></div>

Discussion