GORAGOD.com

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

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

<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 ด้วยนะครับ