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

เขียนเมื่อ 11 ปีก่อน โดย Ninenik Narkdee
focus text jquery อัตโนมัติ

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ focus text 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>

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

วันที่ / /


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ