วิธาจำกัดช่องกรอกให้รับเฉพาะตัวเลขใน HTML

บทนำ

ใช้ <input type="number"> เพื่อให้ช่องกรอกรับเฉพาะตัวเลข เบราว์เซอร์จะตรวจสอบอัตโนมัติ

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Input Number</title>
  </head>
  <body>
    <form action="" method="get">
      กรอกตัวเลข 1 ถึง 20: <br>
      <input type="number" name="num" min="1" max="20"><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

แอตทริบิวต์สำคัญ

การจัดสไตล์ Spinner (ปุ่มบวก/ลบ)

/* ซ่อน spinner ใน Chrome/Safari/Edge */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

กรณีต้องการตัวเลขแต่ไม่ต้องการ Spinner

ใช้ <input type="text" inputmode="numeric" pattern="[0-9]*"> แทน จะแสดงแป้นพิมพ์ตัวเลขบนมือถือโดยไม่มี Spinner