การตรวจสอบการกรอกค่าตัวเลขเกินกำหนด
มีคำถามจากบอร์ดว่า จะตรวจสอบค่าตัวเลขที่กรอก ว่าเกินกำหนดได้อย่างไร ผมเลยตอบให้ตามนี้ โดยมีเพิ่มเติมว่า เมื่อต้องการตรวจสอบค่าตัวเลขแล้วก็เลยยอมให้มีการกรอกได้เฉพาะตัวเลขแถมไปด้วยเลย
<input type="text" id="demo_text_2" />
โค้ด HTML ในส่วนของ Input
$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 สำหรับตรวจสอบการกรอกค่ามากกว่าที่กำหนด ถ้ากรอกมากกว่าก็ให้แสดงข้อความเตือน
// ฟังก์ชั่นรับการกดคีย์ เป็นตัวเลขเท่านั้น
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 ด้วยนะครับ