PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

26 February 2009 By
jquery อัตโนมัติ text focus

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery อัตโนมัติ text focus



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

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>

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

วันที่ / /






Tags:: อัตโนมัติ text focus jquery






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


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