ตามค่าเริ่มต้น ระบบจะใช้ปุ่ม Tab เพื่อสลับโฟกัสขององค์ประกอบของหน้า คุณเคยคิดไหมว่าปุ่ม Enter ยังสามารถบรรลุฟังก์ชันนี้และให้ประสบการณ์ผู้ใช้ที่ดีได้ ต่อไป เราใช้ Jquery เพื่อใช้ปุ่ม Enter เพื่อเปลี่ยนโฟกัส โค้ดนี้ได้รับการทดสอบในเบราว์เซอร์ที่ใช้กันทั่วไป IE7, IE8, Firefox 3, Chrome 2 และ Safari 4
เครื่องมือพัฒนาที่ใช้คือ Microsoft VS2010+Jquery framework
ขั้นตอนการดำเนินการมีดังนี้
1. ขั้นแรกให้อ้างอิงไลบรารีคลาส Jquery
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
2. รหัสจาวาสคริปต์
<script type="text/javascript">
$(ฟังก์ชัน () {
$('input:text:first').focus();
var $inp = $('อินพุต: ข้อความ');
$inp.bind('keydown', ฟังก์ชัน (e) {
คีย์ var = e.ซึ่ง;
ถ้า (คีย์ == 13) {
e.preventDefault();
var nxtIdx = $inp.index(นี่) + 1;
$(":input:text:eq(" + nxtIdx + ")").โฟกัส();
-
-
-
</สคริปต์>
วิเคราะห์ :
$('input:text:first').focus();
เมื่อเตรียมใช้งานเพจ โฟกัสจะอยู่ในกล่องข้อความแรก
var $inp = $('อินพุต: ข้อความ');
ใช้การรวบรวมองค์ประกอบกล่องข้อความ type=text
$inp.bind('keydown', ฟังก์ชัน (e) {}
ผูกเหตุการณ์ 'keydown' เข้ากับคอลเลกชันกล่องข้อความ
คีย์ var = e.ซึ่ง;
รับค่าคีย์ที่กดในปัจจุบัน เช่น Enter ค่าคีย์ = 13
e.preventDefault();
คุณสามารถป้องกันไม่ให้พฤติกรรมเริ่มต้นเกิดขึ้นและมีอย่างอื่นเกิดขึ้น ที่นี่เราจะป้องกันไม่ให้ PostBack เกิดขึ้นและเปลี่ยนโฟกัสแทน อีกวิธีที่คล้ายกันคือ stopPropagation ซึ่งป้องกันไม่ให้เหตุการณ์ js เดือดพล่าน