ใช้ jQuery สร้าง การเลื่อนโฟกัส ของ textbox ด้วยลูกศร บนแป้นพิมพ์ คีบอร์ด keyboard

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
focus jquery textbox keyboard เลื่อน

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



การเลื่อนโฟกัส ของ textbox ด้วยลูกศร บนแป้นพิมพ์  กรณีที่มีจำนวน textbox จำนวนมาก
จะทำให้เกิดความสะดวก ในการกรอกข้อมูล ซึ้งทำให้สามารถกรอกข้อมูล อย่างต่อเนื่อง โดยไม่
ต้องใช้เมาส์ ในการกำหนดโฟกัส ของ textbox ที่ต้องการกรอกข้อมูล แต่ใช้วิธีการ เลื่อนลูกศร
ซ้าย ขวา ขึ้น ลง ในแป้นพิมพ์

CSS ตัวอย่าง

<style type="text/css">
table.myTable input{
	width:50px;
}
</style>

HTML ตัวอย่าง

<form id="form1" name="form1" method="post" action="">
  <table class="myTable" width="500" border="0" align="center" cellpadding="0" cellspacing="3">
    <tr>
      <td width="25%" align="center"><input type="text" name="data" id="data" /></td>
      <td width="25%" align="center"><input type="text" name="data2" id="data2" /></td>
      <td width="25%" align="center"><input type="text" name="data3" id="data3" /></td>
      <td width="25%" align="center"><input type="text" name="data4" id="data4" /></td>
    </tr>
    <tr>
      <td align="center"><input type="text" name="data5" id="data5" /></td>
      <td align="center"><input type="text" name="data6" id="data6" /></td>
      <td align="center"><input type="text" name="data7" id="data7" /></td>
      <td align="center"><input type="text" name="data8" id="data8" /></td>
    </tr>
    <tr>
      <td align="center"><input type="text" name="data9" id="data9" /></td>
      <td align="center"><input type="text" name="data10" id="data10" /></td>
      <td align="center"><input type="text" name="data11" id="data11" /></td>
      <td align="center"><input type="text" name="data12" id="data12" /></td>
    </tr>
    <tr>
      <td align="center"><input type="text" name="data13" id="data13" /></td>
      <td align="center"><input type="text" name="data14" id="data14" /></td>
      <td align="center"><input type="text" name="data15" id="data15" /></td>
      <td align="center"><input type="text" name="data16" id="data16" /></td>
    </tr>
  </table>
</form>

 

jQuery Code ตัวอย่าง

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	var objSet=$("table.myTable").find("input"); // กำหนด ส่วน หรือขอบเขต การจัดการ
	objSet.eq(0).focus(); // กำหนดให้โฟกัสไปที่ ตัวแรก
	objSet.keyup(function(event){
		var len_obj=objSet.length;
		var now_id=objSet.index($(this));
		var row_len=$(this).parents("tr").find("input").length;
		var navCode=event.keyCode;
		switch(navCode){
			case 37:
				objSet.eq(now_id-1).focus();
				break;
			case 38:
				if(now_id>=row_len){
					objSet.eq(now_id-row_len).focus();
				}
				break;
			case 39:
				objSet.eq(now_id+1).focus();
				break;
			case 40:
				objSet.eq(now_id+row_len).focus();
				break;
		}
	});
});
</script>

 



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











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











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