Home > ASP.NET > Web Controls Focus ว่าด้วยเรื่องของ การกำหนด Focus ให้กับ Web Controls

Web Controls Focus ว่าด้วยเรื่องของ การกำหนด Focus ให้กับ Web Controls

ว่ากันไปแล้วผมเขียนโปรแกรมมานาน ผมหมายถึง Windows form นะครับเรื่องของการ Focus ไปยัง control ใด ๆ ก็ไม่ใช้เรื่องยาก เพราะว่าส่วนใหญ่แล้ว controls ต่างเหล่านั้นจะมี Method สำหรับการ Focus ไปที่ controls นั้น ๆได้ แต่การเขียนโปรแกรม บน Web แล้วต้องขอยืมความช่วยเหลืออันวิเศษ จาก scripts เช่น Java script นะครับ แต่สำหรับ ASP.NET 2.0 นั้นคือสิ่งที่เพิ่งมีให้ใช้งาน ผมหมายถึง Web Controls นะครับ

ดังนั้น Web controls จึงมี method ที่ชื่อว่า Focus ทุก controls ซึ่งเราจะใช้ได้ก็เฉพาะ controls ที่เป็นพวก Input controls ( controls ที่สามารถรับข้อมูลจากการพิมพ์จาก Keyboard ได้ ) เมื่อ Web page ถูก render ที่ browser ผู้ใช้จะเริ่มการทำงานที่ control ที่ถูก Focus ซึ่งเรามักจะออกแบบให้มี function การทำงานเป็นแบบนี้ ผมรู้ทุกคนตอบในใจว่า จริงของ –ึง ฮะ ฮะ ตัวอย่างให้เห็นภาพ ก็อย่างเช่น สมมติว่าเรามี form สำหรับให้ผู้ใช้แก้ไข ข้อมูลของ customer เราอาจจะกำหนดหนดให้มีการ เรียก focus method ที่ ข้อมูล address ของ customer ซึ่งอาจจะเป็น TextBox แรก ในหน้าจอนั้น นะครับ ด้วยวิธีการนี้ก็จะทำให้ cursor ปรากฏอยู่ที่ TextBox ทันที่ หรือ หาก TextBox นี้อยู่ด้านล่างของ form ซึ่งอาจจะเกินหน้าจอไป มันก็จะถูก scroll กลับมายังที่ตำแหน่งที่เหมาะสมโดยอัตโนมัตินะครับ หลังจากนั้นผู้ใช้ก็สามารถที่จะเลื่อน Focus ไปยัง control อื่น ๆ ตามลำดับโดยใช้ Tab key ( หรือพวกเราชอบ Modify ให้มันสามารถเลือนไปได้ด้วย Enter key also แม่นบ่ )

ครับ อย่างที่ได้กล่าวไป ถ้าเราคุ้นเคยกับการเขียน HTML ก็จะรู้ว่า ไม่มีวิธีการใดใด ที่จะทำให้เกิด การทำงานแบบนั้นได้ หากไม่มีตัวช่วยอย่าง JavaScript ซึ่งนี่ก็คือความลับของ ASP.NET หล่ะครับ หรือไม่ลับก็ไม่รู่สิ ผมเพิ่งรู้ก็เลยบอกว่ามันเป็นความลับ มันทำงานอย่างนี้นะครับ หลังจากที่มันทำการ ประมวลผล code ที่ใส่ไปแล้ว page จะถูก render และส่งกลับมายัง client แต่ก่อนที่จะส่งกลับนั้น หลังจาก render เสร็จมากกว่า ASP.NET จะเพิ่ม JavaScript code เข้าไปที่ท้ายอขง page นั้น JavaScript Code นี้มันทำหน้าที่ กำหนด focus ไปที่ Control ที่ trig Focus() method control ท้ายสุดเลยนะครับ ( หมายถึงหากมีการ trig หลาย ๆ control คนที่ trig คนสุดท้ายนั้นจะได้ focus เมื่อแสดงผลใน Browser ) ตัวอย่างก็แบบนี้นะครับ

นอกจากการ เรียกใช้ Focus() method ตรง ๆ แล้ว เรายังสามารถที่จะ set focus ให้กับ control ที่เราต้องการให้ถูก focus เสมอเมื่อ แสดง page นั้น ( นอกเสียจากว่า มันโดน แทนที่ด้วยการ เรียก Focus() method ) ทำได้ด้วยการ กำหนดที่ DefaultFocus property ของ Form แบบนี้

ที่มาที่ไปของ WebForm_AutoFocus() ที่ ASP.NET สร้างขึ้นให้ อัตโนมัตินั้น เป็น JavaScript method ที่มีอยู่ใน WebResource.axd ( ASP.NET extension ) มีชื่อว่า Focus.js ถ้าเรา อยากจะดูให้ลึกลงไปสักนิดเมื่อเราไปเปิด HTML page ดู จะเห็น script element ที่อ้างอิงไปยัง Focus.js มีลักษณะคล้าย ๆ แบบนี้

วิธีอื่น ที่เราจะเล่นกับ focus ก็คือการใช้งาน access keys เช่นเมื่อเรา กำหนด AccessKey property ของ TextBox ให้เป็น A เมื่อ ผู้ใช้ กด Alt+A focus จะสลับไปยัง TextBox ทันที่ Label ก็ใช่ว่าจะไม่มีอะไรให้เล่นนะครับ ถึงแม้ว่าตัวมันเองไม่สามารถ รับ focus ได้ วิธีก็คือ ให้ กำหนด AssociatedControlID property ของ Label ให้เป็น ID ของ input control ที่มันเป็นตัวอธิบายอยู่ ด้วยวิธีนี้ label จะโยน focus ไปยัง control ที่เรากำหนด ID ไว้ใน AssociatedControlID

ตัวอย่างเช่น Label ใน code จะส่ง focus ให้กับ TextBox2 เมื่อผู้ใช้งาน กด Alt+2


TextBox2:

เป็นต้น
เพิ่มเติมอีกนิด เรื่องของ access keys นั้น browser ที่ เป็น non-Microsoft browsers พูดง่าย ไม่ใช้ IE ก็สนับสนุน นะครับ เช่น Firefox เป็นต้น

Categories: ASP.NET Tags: ,
  1. January 9, 2009 at 7:53 pm

    ขอบคุณค่ะสำหรับข้อมูล

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: