A-AA+then

พอมีวิธีทำให้สามารถเลื่อน cursor ไปแต่ละ textbox โดยใช้ลูกศรในคี

1,948

พอมีวิธีทำให้สามารถเลื่อน 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>

5 ความคิดเห็น

เคยลองทำเกมออนไลน์บนเว็บด้วย javascript มาทีนึงแล้วแต่ยังแช่อยู่ไม่ได้ทำต่อ
ตอนนี้ลืมไปแล้วด้วยว่าทำไรไปมั้ง และจะทำไรต่อ ลืมขนาดว่าต้องมานั่งแงะโค้ดตัวเองใหม่หมด

อันนี้มันต้องจัดการเรื่องโฟกัส ตอบให้เลยเดี๋ยวจะไม่เคลียร์ ( .::{เปรียว}::. ก็ยังอ่อนหัดอยู่)
โค้ดจริงคงไม่กี่บรรทัดหรอก ลองศึกษาดูเกี่ยวกับ DOM นะ
1

จ้า ขอบคุณมากมาย อย่างน้อยก็ยังมีคนตอบ อิอิ

2

โอ้วว ได้แล้วครับ ลอง search จากที่  .::{เปรียว}::. บอกข้อมูลมา ขอบคุณมากมายจ้า

3

อย่าเก็บไว้คนเดียวเดี๋ยวจะลืมแล้วไม่มีใครช่วยจำ บอกคนอื่นเค้าด้วยนะนะ 
4

ได้จ้า ใช้ 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>

5
^