การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery

การกรอกเลขที่บัตรเครดิต

HTML Code

<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

<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

  <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

<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

  <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

<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

  <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

<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>

ตัวอย่าง การกรอกวันที่