การกรอกเลขที่บัตรเครดิต
HTML Code
1 2 3 4 5 6 7 8 9 10 11 12 | <form id="form1" name="form1" method="post" action=""><!--กำหนดชื่อของ input text แล้วตามด้วย _ ตามด้วย ลำดับที่ เช่น _1 ตัวที่ 1 , _2 ตัวที่ 2ตัวอย่าง ชื่อ cardNo ก็กำหนดเป็น cardNo_1, cardNo_2 ...cardNo_n ตาม n จำนวนที่ต้องการ จากตัวอย่างข้างล่างมี 4 ตัว จากนั้นกำหนด maxlength ให้กับinput text นั้นๆ โดย maxlength จำนวนตัวอักษรที่จะกรอกได้ เช่น maxlength="4" หมายถึง สามารถกรอก ตัวอักษรได้ ไม่เกิน 4 ตัว-->เลขบัตรเครดิต <input name="cardNo_1" type="text" id="cardNo_1" size="3" maxlength="4" /> <input name="cardNo_2" type="text" id="cardNo_2" size="3" maxlength="4" /> <input name="cardNo_3" type="text" id="cardNo_3" size="3" maxlength="4" /> <input name="cardNo_4" type="text" id="cardNo_4" size="3" maxlength="4" /></form> |
Javascript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script><script type="text/javascript"> $(function(){/* สามารถเปลี่ยนจาก cardNo_ เป็นค่าที่ต้องการ */ $("input[name^='cardNo_']").keyup(function(event){ if(event.keyCode==8){ if($(this).val().length==0){ $(this).prev("input").focus(); } return false; } if($(this).val().length==$(this).attr("maxLength")){ $(this).next("input").focus(); } }); });</script> |
ตัวอย่าง การกรอกเลขที่บัตรเครดิต
การกรอกเลขที่บัตรประชาชน
HTML Code
1 2 3 4 5 6 7 8 | <form id="form1" name="form1" method="post" action="">เลขที่บัตรประชาชน <input name="citizen_1" type="text" id="citizen_1" size="1" maxlength="1" style="width:10px;" /> <input name="citizen_2" type="text" id="citizen_2" size="3" maxlength="4" style="width:35px;" /> <input name="citizen_4" type="text" id="citizen_4" size="4" maxlength="5" style="width:40px;" /> <input name="citizen_5" type="text" id="citizen_5" size="1" maxlength="1" style="width:10px;" /> <input name="citizen_6" type="text" id="citizen_6" size="1" maxlength="2" style="width:15px;" /></form> |
Javascript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script><script type="text/javascript"> $(function(){/* สามารถเปลี่ยนจาก citizen_ เป็นค่าที่ต้องการ */ $("input[name^='citizen_']").keyup(function(event){ if(event.keyCode==8){ if($(this).val().length==0){ $(this).prev("input").focus(); } return false; } if($(this).val().length==$(this).attr("maxLength")){ $(this).next("input").focus(); } }); });</script> |
ตัวอย่าง การกรอกเลขที่บัตรประชาชน
การกรอกเบอร์โทรศัพท์
HTML Code
1 2 3 4 5 6 7 8 | <form id="form1" name="form1" method="post" action=""> เบอร์โทรศัพท์ <input name="telNo_1" type="text" id="telNo_1" size="1" maxlength="2" style="width:15px;" /> - <input name="telNo_2" type="text" id="telNo_2" size="3" maxlength="4" style="width:35px;" /> - <input name="telNo_3" type="text" id="telNo_3" size="3" maxlength="4" style="width:35px;" /> </form> |
Javascript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script><script type="text/javascript"> $(function(){/* สามารถเปลี่ยนจาก telNo_ เป็นค่าที่ต้องการ */ $("input[name^='telNo_']").keyup(function(event){ if(event.keyCode==8){ if($(this).val().length==0){ $(this).prev("input").focus(); } return false; } if($(this).val().length==$(this).attr("maxLength")){ $(this).next("input").focus(); } }); });</script> |
ตัวอย่าง การกรอกเบอร์โทรศัพท์
การกรอกวันที่
HTML Code
1 2 3 4 5 6 7 8 | <form id="form1" name="form1" method="post" action=""> วันที่ <input name="date_1" type="text" id="date_1" size="1" maxlength="2" style="width:15px;" /> / <input name="date_2" type="text" id="date_2" size="1" maxlength="2" style="width:15px;" /> / <input name="date_3" type="text" id="date_3" size="3" maxlength="4" style="width:35px;" /> </form> |
Javascript Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script><script type="text/javascript"> $(function(){/* สามารถเปลี่ยนจาก date_ เป็นค่าที่ต้องการ */ $("input[name^='date_']").keyup(function(event){ if(event.keyCode==8){ if($(this).val().length==0){ $(this).prev("input").focus(); } return false; } if($(this).val().length==$(this).attr("maxLength")){ $(this).next("input").focus(); } }); });</script> |
ตัวอย่าง การกรอกวันที่
