การเลื่อนโฟกัส ของ 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>
