ASP.NET กับ jQuery: Auto Focus ด้วยปุ่ม Enter แทนปุ่ม Tab

ความต้องการ…

หลายๆท่านคงเคยเจอความต้องการของลูกค้าที่ชอบ กด Enter มากกว่ากด Tab ในขณะกรอกข้อมูลใน textbox หนึ่งเสร็จแล้วต้องการ focus ไปอีก textbox ต่อไป ไม่มีปัญหาครับ เทคนิคนี้จะช่วยเราได้

เตรียมตัวให้พร้อม…

1. สร้าง web form ใน project ที่เราเปิดอยู่ ตั้งชื่อว่า AutoFocus.aspx

2. เพิ่ม TextBox เข้าไปใน form เล็กน้อยเพื่อใช้ทดสอบผลงานของเรา ตาม code ข้างล่างนี้ครับ

<form id=”form1″ runat=”server”>

<div align=”center”>

<fieldset style=”width:400px;height:200px;”>

<table cellpadding=”3″ cellspacing=”3″ border=”0″>

<tr><td>

<asp:Label ID=”lblName” Text=”ชื่อ: ” runat=”server”></asp:Label></td>

<td><asp:TextBox ID=”txtName” Width=”200px” runat=”server”></asp:TextBox></td></tr>

<tr><td><asp:Label ID=”lblAddress” Text=”ที่อยู่: ” runat=”server”></asp:Label></td>

<td><asp:TextBox ID=”txtAddress” Width=”200px” runat=”server”></asp:TextBox></td></tr>

<tr><td><asp:Label ID=”lblContact” Text=”เลขที่ติดต่อ: ” runat=”server”></asp:Label></td>

<td><asp:TextBox ID=”txtContact” Width=”200px” runat=”server”></asp:TextBox></td></tr>

<tr><td><asp:Label ID=”lblEmail” Text=”Email: ” runat=”server”></asp:Label></td>

<td><asp:TextBox ID=”txtEmail” Width=”200px” runat=”server”></asp:TextBox></td></tr>

<tr><td></td><td><asp:Button ID=”btnSubmit” Text=”ตกลง” runat=”server” />

<asp:Button ID=”btnReset” Text=”เริ่มใหม่” runat=”server” />

</td></tr>

</table>

</fieldset>

</div>

</form>

3. ทดลอง run ดูครับ จะได้หน้าตา form แบบนี้

ก่อนที่จะใส่ script ที่ทำให้ กด Enter แล้ว autofocus ได้ก็ลองใช้ tab ทดลองเล่นไปก่อน ซึ่งเมื่อเรากด Enter ที่ textbox ใดๆ ก็จะเป็นการ commit form พอเข้าใจการทำงานของปุ่ม tab กับ enter แล้วเรามาทำ AutoFocus กันต่อ

วิธีการทำ …

1. เติมรหัส javascript ใน section ของ document.ready() แล้วใน jQuery selector ค้น text box แรกแล้ว focus จะได้

$(‘input:text:first’).focus()

2. ใช้คำสั่ง bind เหตุการณ์ keydown ไว้ทุกๆ TextBox จะได้

$(‘input:text’).bind(“keydown”, function(e) {

3. ตรวจสอบการกด key enter มี code เท่ากับ 13

if (e.which == 13) {

4. การกด enter คือการ submit form ต้องหยุดการ submit form

e.preventDefault();

5. หลังจากนั้นเราก็ต้องค้น index ของ textbox ถัดไปเพื่อ focus

var nextIndex = $(‘input:text’).index(this) + 1;

6. focus textbox nextIndex นี้ซะ

$(‘input:text’)[nextIndex].focus();

}

});

7. ที่ปุ่ม btnReset ใส่ เหตุการณ์ click เพื่อ เริ่มต้น หรือ clear ค่าที่ textbox ใหม่ทั้งหมด

$(‘#btnReset’).click(

function() {

$(‘form’)[0].reset();

});

เสร็จแล้วครับ Auto Focus ด้วยปุ่ม Enter รหัส jQuery ที่สมบูรณ์

$(document).ready(function() {
$(‘input:text:first’).focus();
$(‘input:text’).bind(“keydown”, function(e) {
if (e.which == 13) {   //Enter key
e.preventDefault(); //ไม่สนใจ default behaviour ของ enter key
var nextIndex = $(‘input:text’).index(this) + 1;
$(‘input:text’)[nextIndex].focus();
}
});$(‘#btnReset’).click(
function() {
$(‘form’)[0].reset();
});});

Advertisements

#asp-net, #jquery