พอมีวิธีทำให้สามารถเลื่อน cursor ไปแต่ละ textbox โดยใช้ลูกศรในคี
พอมีวิธีทำให้สามารถเลื่อน cursor ไปแต่ละ textbox โดยใช้ลูกศรในคีย์บอร์ดเลื่อน ขึ้น ลง ซ้าย ขวา รึป่าวครับ
ตัวอย่างโค้ดที่ทำ เลื่อนได้เฉพาะ ลูกศรทางขวาเท่านั้น (ตามจริงอันนี้ ก็สลับกับปุ่มtabเท่านั้นเอง)
<script>
function event_button(){
if(window.event.keyCode == 39){
window.event.keyCode = 9;
}
}
</script>
<body onkeydown="event_button();">
<INPUT TYPE="text" NAME=""><INPUT TYPE="text" NAME=""><br/>
<INPUT TYPE="text" NAME=""><INPUT TYPE="text" NAME=""><br/>
<INPUT TYPE="text" NAME=""><INPUT TYPE="text" NAME="">
</body>
ตอนนี้ลืมไปแล้วด้วยว่าทำไรไปมั้ง และจะทำไรต่อ ลืมขนาดว่าต้องมานั่งแงะโค้ดตัวเองใหม่หมด
อันนี้มันต้องจัดการเรื่องโฟกัส ตอบให้เลยเดี๋ยวจะไม่เคลียร์ ( .::{เปรียว}::. ก็ยังอ่อนหัดอยู่)
โค้ดจริงคงไม่กี่บรรทัดหรอก ลองศึกษาดูเกี่ยวกับ DOM นะ
จ้า ขอบคุณมากมาย อย่างน้อยก็ยังมีคนตอบ อิอิ
โอ้วว ได้แล้วครับ ลอง search จากที่ .::{เปรียว}::. บอกข้อมูลมา ขอบคุณมากมายจ้า
ได้จ้า ใช้ jquery ทำอ่ะครับ โค้ดจะประมาณนี้ครับ
<script type="text/javascript" src="scripts/jquery.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>
<table class="myTable">
<tr>
<td width="25%" align="center"><input type="text" /></td>
<td width="25%" align="center"><input type="text" /></td>
<td width="25%" align="center"><input type="text" /></td>
</tr>
<tr>
<td align="center"><input type="text" /></td>
<td align="center"><input type="text" /></td>
<td align="center"><input type="text" /></td>
</tr>
<tr>
<td align="center"><input type="text" /></td>
<td align="center"><input type="text" /></td>
<td align="center"><input type="text" /></td>
</tr>
<tr>
<td align="center"><input type="text" /></td>
<td align="center"><input type="text" /></td>
<td align="center"><input type="text" /></td>
</tr>
</table>