การตรวจสอบการกรอกค่าตัวเลขเกินกำหนด

มีคำถามจากบอร์ดว่า จะตรวจสอบค่าตัวเลขที่กรอก ว่าเกินกำหนดได้อย่างไร ผมเลยตอบให้ตามนี้ โดยมีเพิ่มเติมว่า เมื่อต้องการตรวจสอบค่าตัวเลขแล้วก็เลยยอมให้มีการกรอกได้เฉพาะตัวเลขแถมไปด้วยเลย

<input type="text" id="demo_text_1" />

<input type="text" id="demo_text_2" />

โค้ด HTML ในส่วนของ Input

<script type="text/javascript">

$G("demo_text_1").addEvent("keydown", numberOnly);

$G("demo_text_1").addEvent("keyup", maxVal);

$G("demo_text_2").addEvent("keydown", numberOnly);

$G("demo_text_2").addEvent("keyup", maxVal);

</script>

โค้ด Javascript ที่เกี่ยวข้องกับ input มี 2 คำสั่ง คือ keydown สำหรับตรวจจับการกดคีย์ตัวเลข เพื่อให้กรอกได้เฉพาะตัวเลขเท่านั้น เนื่องจากเราจะกำหนดให้กรอกเฉพาะตัวเลขเท่านั้น และ keyup สำหรับตรวจสอบการกรอกค่ามากกว่าที่กำหนด ถ้ากรอกมากกว่าก็ให้แสดงข้อความเตือน

<script type="text/javascript">

// ฟังก์ชั่นรับการกดคีย์ เป็นตัวเลขเท่านั้น

var numberOnly = function( event ) {

  var key = GEvent.keyCode(event); // อ่านค่า keycode

  if ( !(  ( key > 48 && key < 68 ) || ( key > 95 && key < 106 ) || key == 8 || key == 9 || key == 37 || key == 39 ) ) {

    GEvent.stop(event); // ยกเลิก event

    return false; // คืนค่า false

  };

};

// ฟังก์ชั่นตรวจสอบค่าเกินกำหนด (100)

var maxVal = function( event ) {

  if(parseFloat(GEvent.element(event).value) > 100) {

     alert('ไม่สามารถกรอกข้อมูลเกิน 100 ได้');

  };

};

</script>

โค้ด Javascript อีกส่วน สามารถแยกเป็นไฟล์ JS ภายนอกได้ สามารถเรียกใช้พร้อมกันได้หลายๆครั้ง(input) โดยไม่ต้องเขียนทีละตัว และ อย่าลืม include GAJAX เข้าใน project ด้วยนะครับ