ทำให้ HTML ใช้ Enter แทน TAB ได้
หลายๆคนคงติดปัญหาว่า อยากทำให้ Web Form สามารถกดปุ่ม [Enter] แทน[TAB] ในการ Input ข้อมูลใน Form ได้ ซึ่งทุกๆคนก็เขียน JavaScript ดัก Event KeyUp, KeyDown, KeyPress โดยต้องส่ง Next Field Name หรือ Id ไปให้ Function ด้วย หรือเทคนิคอื่นๆ ซึ่งมันก็แก้ปัญหาได้ระดับหนึ่ง
วันนี้ผมมีอีกเทคนิคนึงที่รับรองว่าเจ๋งกว่าวิธีที่ผมกล่าวผ่านมาข้างต้นแน่นอน เพราะมันทั้งเขียนสั้น ง่าย และมันก็ทดแทนปุ่ม [TAB] ได้ทุกประการ ไม่ว่าจะเป็น disabled field หรือ tabindex ซึ่งมันจะสะดวกกว่ามากในการที่เราจะจัดลำดับ Field ใน Form ของเรา
จากการที่ผมเองก็เคยทำแต่ไม่เคยจำทำให้ต้องคอย search หาเทคนิคเดียวกันนี้บ่อยๆ จึงทำให้คิดอยากเขียนมันเก็บไว้กันลืม วิธีที่ผมจะกล่าวถึงนี้ก็เป็นการใช้ JavaScript เช่นกันครับ แต่ทำเพื่อแปลงค่า KeyCode ที่ Tag Body ของ Html จาก [Enter] ให้กลายเป็น [TAB] ครับ ซึ่ง Code สั้นและง่ายมากๆ ไม่รู้จะอธิบายยังไง ขอเชิญดูตัวอย่าง code ที่ผมเตรียมให้ดูเลยดีกว่าครับ
<body onkeydown=
"if (event.keyCode==13)
{event.keyCode=9; return event.keyCode }">Index 100 <input tabindex="100" name="I_100"><br>
Index 200 <input tabindex="200" name="I_200"><br>
Index 300 <input tabindex="300" name="I_300"><br>
Index 600 <input tabindex="600" name="I_600"><br>
Index 400 (disables)
<input tabindex="400" name="I_400" disabled><br>
Index 700 (hidden)
<input type="hidden" tabindex="700" name="I_700"><br>
Index 800 (readonly)
<input tabindex="800" name="I_800" readonly><br>
Index 900 <input tabindex="900" name="I_900"><br>
Index 500 <input tabindex="500" name="I_500"><br>
Index 950 <input tabindex="950" name="I_950"><br></body>
หากลอง copy code ข้างบนไปรันดู แล้วลอง กด [Enter] จะพบว่า ลำดับ หรือการทำงานจะเหมือนกด [TAB] เลยล่ะครับ
*หมายเหตุ สำหรับ Field ที่ทำเป็น readonly การกด[TAB] จะยังสามารถไป focus ที่ field นั้นได้อยู่แต่จะไม่เห็น cursor ซึ่งจะทำให้ user สับสนว่า cursor มันหายไปไหน ปกติกรณีแบบนี้ผมจะใช้เป็น text label หรือ disable input นั้นไปเลย ถ้าต้องการ submit ค่าไปกับ form ก็ทำเป็น hidden field ซะ
ที่มา : https://kiwidaddy.wordpress.com
ไม่มีความคิดเห็น:
แสดงความคิดเห็น