JavaScript กรอกเฉพาะตัวเลข 0-9 ใน TextBox HTML

สอนภาษา JavaScript เขียนโค้ดบังคับให้ช่อง input text ของภาษา HTML รองรับการกรอกได้เฉพาะตัวเลข 0-9 เท่านั้น โดยใช้หลักการดักจับการกดปุ่มบนคีย์บอร์ดของผู้ใช้งาน สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript กรอกเฉพาะตัวเลข 0-9 ใน TextBox HTML

<input type="text" id="number">

<script>
    var input = document.getElementById("number");
    input.onkeydown = function(e) {
        if (48 > e.which || e.which > 57) {
            if ( e.key.length === 1 ) e.preventDefault();
        }
    };
</script>

1. สร้าง input type text สำหรับช่องกรอก รองรับเฉพาะตัวเลข มี attribute id คือ number

2. ในภาษา JavaScript อ้างถึง id number ด้วยคำสั่ง document.getElementById

3. ใช้คำสั่ง onkeydown ดักจับเหตุการณ์เมื่อผู้ใช้งานกดปุ่มบนคีย์บอร์ด

4. กรณีถ้าผู้ใช้งานไม่ได้กดปุ่มตัวเลข 0 - 9 คือ น้อยกว่า 48 หรือ มากกว่า 57 คำสั่ง e.preventDefault() จะถูกใช้งาน

5. คำสั่ง e.preventDefault() คือ ทำให้เหตุการณ์การถูกยกเลิก ส่งผลให้อักษรที่พิมพ์ไปไม่ปรากฏในช่อง TextBox