home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

HTML5 Input type=number ใน Firefox (min Attribute)

Firefox ไม่รองรับ min, max, step บน type="number" (รุ่นเก่า)

Chrome รองรับเต็มที่ Firefox เริ่มรองรับ Validation UI ในรุ่นใหม่ (Firefox 29+)

ตัวอย่าง

<!DOCTYPE html>
<html>
<head><title>HTML input number</title></head>
<body>
  <form action="" method="get">
    เลือกตัวเลข 1-10: <input type="number" name="num" min="1" max="10"><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

Polyfill / Workaround

  • ใช้ type="text" + pattern="[0-9]*" + JS Validation
  • ใช้ Library เช่น html5-number-polyfill
  • Custom Validation ด้วย setCustomValidity()