🅿️

input[text="text"]とpattern属性でinput[text="number"]の代わりを実装する

2024/03/22に公開

input[text="number"]が使いにくいので、input[text="text"]で代用する方法。
pattern属性が思いの外優秀で、目から鱗。
pattern="0|[1-9][0-9]{0,1}|100"　で、 0 ~ 100 などを制御出来たので、
シェアします。

codesandbox

コード

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>
      input[text="text"]とpattern属性でinput[text="number"]の代わりを実装する
    </h1>
    <h3>number</h3>
    <form id="form1">
      <input
        style="width: 200px"
        type="number"
        name="age"
        required
        min="0"
        max="100"
        placeholder="年齢必須　0~100歳まで"
      />
      <input type="submit" name="submit" disabled />
    </form>
    <h3>text & pattern</h3>
    <form id="form2">
      <input
        style="width: 200px"
        type="text"
        name="age"
        required
        pattern="0|[1-9][0-9]{0,1}|100"
        maxlength="3"
        placeholder="年齢必須　0~100歳まで"
      />
      <input type="submit" name="submit" disabled />
    </form>

    <script>
      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();
      });
    </script>
  </body>
</html>

codesandbox

コード

Discussion