JavaScript เช็คความยาวตัวเลขจากช่องกรอกข้อมูล

สอนเขียนโค้ดภาษา JavaScript เช็คความยาวตัวเลขจากช่องกรอกข้อมูล โดยการใช้คำสั่ง onkeypress เมื่อผู้ใช้งานกรอกข้อมูลจะเรียกใช้ฟังก์ชันที่กำหนด โดยใช้ value.length เพื่อดึงความยาวตัวเลขจากช่องกรอกข้อมูล และใช้คำสั่ง event.preventDefault() เพื่อยกเลิกเหตุการณ์การกรอกข้อมูลกรณีถ้าจำนวนตัวเลขเกินกว่าที่กำหนด สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง JavaScript เช็คความยาวตัวเลขจากช่องกรอกข้อมูล

<input type="number" id="txt" onkeypress="checkLength(event);"> *กรอกได้แค่ 5 ตัวเลข
<br/>
<div id="result"></div>

<script>
     function checkLength(event) {
        var result = document.getElementById("result");
        var txt = document.getElementById("txt");
        var l = parseInt(txt.value.length) + 1;
        result.innerHTML = "ความยาวตัวเลข คือ "+l;
        if( l > 5 ) {
            event.preventDefault();
            result.innerHTML = "กรอกได้แค่ 5 ตัวเลข";
        }
     }
</script>

1. โค้ดด้านบนทำงานโดยเช็คความยาวตัวเลขจากช่องกรอกข้อมูล และถ้าจำนวนตัวเลขเกิน 5 ตัวจะแสดงข้อความว่า “กรอกได้แค่ 5 ตัวเลข” และไม่สามารถกรอกตัวเลขเพิ่มได้

2. เมื่อผู้ใช้งานกรอกตัวเลข จะเรียกใช้ฟังก์ชัน checkLength ในภาษา JavaScript

3. ตัวแปร result อ้างถึง div id = result ใช้สำหรับแสดงค่าบนเว็บไซต์

4. ตัวแปร txt อ้างถึงช่องกรอก id = txt ใช้สำหรับดึงจำนวนตัวเลขที่กรอก

5. ใช้คำสั่ง value.length กับตัวแปร txt เพื่อดึงจำนวนตัวเลข และเก็บไว้ที่ตัวแปร l

6. กรณีถ้าตัวแปร l มีจำนวนมากกว่า 5 ตัวเลข ให้ใช้คำสั่ง event.preventDefault() เพื่อยกเลิกการกรอกค่า และแสดงข้อความ “กรอกได้แค่ 5 ตัวเลข” ที่ div result