TabIndex - tab nhấn sẽ chuyển tôi đến Thanh địa chỉ - không thể làm việc xung quanh bằng cách sử dụng chỉ mục Focus hoặc +

Question

Tôi đọc một số chủ đề nói về cách Thanh Địa chỉ trong IE cơ bản là người đầu tiên lấy nét khi sử dụng TAB (MSDN's tài liệu riêng nói về điều này).

tình huống Tuy nhiên, tôi đã thấy nơi này không phải lúc nào cũng là trường hợp ....

Tôi có một trang chủ và bên trong khu vực nội dung của tôi là một FormView.

Nó mặc định là INSERT xem và không bao giờ có thể để nó (họ chỉ có thể chèn không thể chỉnh sửa và đọc được xử lý ở những nơi khác)

Vì vậy, trên tải trang của tôi cho trang Tôi có:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
     If fvwLogEntry.CurrentMode = FormViewMode.Insert = True Then 
      'Set the default field to position the cursor there...hopefully 
      Dim FCtxtHrEmployeeId As TextBox 
      FCtxtHrEmployeeId = CType(fvwLogEntry.FindControl("txtHrEmployeeId"), TextBox) 
      Page.SetFocus(FCtxtHrEmployeeId.ClientID.ToString) 
     End If 

Bây giờ hoạt động, khi trang tải nó đặt con trỏ vào hộp văn bản employeeID bên trong khuôn mẫu INSERT của formview.

TUY NHIÊN, khi tôi nhấn TAB nó sẽ đưa tôi đến thanh địa chỉ và THEN nếu tôi nhấn lại tab, nó sẽ đưa tôi qua phần còn lại của các mục trên trang.

Tôi đặt chỉ mục tab của mục đầu tiên thành 11 và sau đó được tạo từ đó (tôi đã đọc rằng thanh công cụ của IE có chỉ mục tab vì vậy tôi nghĩ có thể sử dụng số cao hơn sẽ vượt qua chúng, nhưng lại không thực sự là REALLY có ý nghĩa vì nó vẫn sẽ bắt đầu ở số thấp nhất, nhưng tôi đã cho nó một shot nghĩ rằng nó sẽ di chuyển về phía trước từ nơi tập trung được thiết lập.) Nếu tôi bấm vào hộp văn bản và sau đó nhấn TAB nó sẽ di chuyển qua trang như tôi sẽ chờ đợi.

Chỉ khi trang tải và lấy tiêu điểm được đặt thành hộp văn bản employeeID mà nhấn tab sẽ di chuyển nó đến thanh địa chỉ.

Tôi cũng đã thử đặt các điều khiển khác thành -1 (những thứ tôi không muốn tab đó), vẫn không có may mắn ở đó.

Vì vậy, tôi có thể làm gì để giải quyết vấn đề này?

Có PHẢI là một cách đơn giản để đặt trọng tâm vào hộp văn bản employeeID và đảm bảo rằng nhấn TAB sau đó di chuyển đến điều khiển tiếp theo trong mẫu chèn của formview và không nhảy lên thanh địa chỉ?

Answer 1

Tôi tìm thấy một tùy chọn tốt hơn nhanh nhất như những gì tôi đã thử. Dưới đây là đoạn code cho rằng

function handleTabOrder() { 
    $('.myClass :visible:input:enabled').each(function (index) { 
     $(this).attr('tabindex', index + 10); 
    }); 

    $('.myClass :visible:input:enabled:first').keydown(function (e) { 
     if (e.keyCode == 9 || e.which == 9) { 
      $("[tabindex=10]").focus(); 
     } 
    }); 
} 

Những gì tôi đã làm ở đây là để gán Tab để tất cả các điều khiển hiển thị trên trang, sau đó tôi đã xử lý các sự kiện phím chỉ kiểm soát đầu tiên (mà thay đổi điều khiển để thanh địa chỉ) và bây giờ nó thay đổi điều khiển sang mục nhập hiển thị tiếp theo trên màn hình.

Chỉ là một công việc xung quanh nhưng hoạt động nhanh hơn bất kỳ thứ nào khác được đề cập trong chuỗi.

Chỉ cần viết hàm trên và tất cả trong sự kiện tải trang.

Answer 2

Có một cái nhìn tại địa chỉ: http://www.w3schools.com/tags/att_global_tabindex.asp

yếu tố txtHrEmployeeId của bạn nên có tabIndex 1 và tất cả các yếu tố khác nên có giá trị cao hơn. -1 không hợp lệ

Đồng thời xác minh rằng tabindex là chính xác trong html được hiển thị (nhấp chuột phải vào trang và "nguồn xem").

Answer 3

Mã jquery sau dường như là làm việc tốt cho tôi ..

$(window).load(function() { 
    $('.myClass :visible:input:enabled:first').focus(); 
}); 

$('body').on('keydown', '.myClass :visible:input:enabled:first', function (e) { 
    if ((e.which == 9) || (e.keyCode == 9)) { 
     $('.myClass :visible:input:enabled:first').focus(); 
    } 
}); 

Answer 4

Câu trả lời đề cập trong bài khác của tôi hoạt động tốt nhưng nó làm cho trang đi biểu diễn rất lớn nhấn bởi vì với mỗi phím bấm trên trang toàn bộ DOM đã được tìm kiếm cho các phần tử. Vì vậy, tôi tìm thấy một giải pháp tối ưu hơn mới

var myNameSpace = function(){ 

this.selector = '.myClass :visible:input:enabled:first'; 

this.myElement = $(selector); 

this._body = $('body'); 
var _self= this; 

this._body.on('keydown',_self.selector,function(e){ 
    if ((e.which == 9) || (e.keyCode == 9)) { 
     _self.myElement.focus(); 
    } 
    }); 
}; 

Ý tưởng chung là để 'Cache' nút để được truy cập. Không cần phải đi qua DOM một lần nữa và một lần nữa để chỉ chọn.

Answer 5

Tôi gặp sự cố tương tự trong IE. Sau khi phân tích một số tôi thấy rằng, vấn đề này xảy ra nếu có bất kỳ nội dung HTML bên ngoài hình thức. ví dụ:

<html> 
<div id="1"> 
</div> 
<form> 
//other code 
</from> 
</html> 

Nó làm việc cho tôi, sau khi tôi di chuyển tất cả HTML bên trong thẻ biểu mẫu.

<html>  
<form> 
<div id="1"> 
</div> 
//other code 
</from> 
</html> 

Answer 6

Tôi cũng gặp vấn đề tương tự. Hóa ra tôi có liên quan đến bộ mở rộng quảng cáo phương thức ajax. một cửa sổ bật lên phương thức đã được hiển thị, mặc dù về mặt kỹ thuật tôi không thể nhìn thấy nó bởi vì nó được bọc bên trong một div cha đã bị ẩn. nếu bạn đang sử dụng trình mở rộng quảng cáo phương thức, điều này có thể gây ra sự cố như thế này.

Answer 7

Tôi cũng gặp sự cố này. Đối với tôi, nó đã được gây ra bởi việc sử dụng phương thức .select() để tập trung tự động vào một trường văn bản ngay sau khi trang được tải. Tôi thay đổi mã của tôi để thay vì sử dụng phương thức .focus() của JQuery và giải quyết vấn đề.

Answer 8

Tôi nhận ra đây là một bài đăng cũ, nhưng phương pháp đơn giản hơn là thêm thuộc tính "tab-stop" vào phần tử biểu mẫu với tabindex cuối cùng. Sau đó, liên kết một trình nghe keydown và tập trung lực vào tabindex đầu tiên khi gặp phải tab-stop.

Dưới đây là một ví dụ đơn giản:

<input type="text" tab-stop /> 

$document.bind("keydown", function(event) { 
    var attrs = event.currentTarget.activeElement.attributes; 

    if (attrs['tab-stop']) { 
     angular.element.find('select')[0].focus(); 
      event.preventDefault(); 
     } 
    }); 
}; 

Answer 9

Nếu bạn đang sử dụng JSF hoặc Primefaces, bạn có thể tận dụng:

<p:focus for"formname"></p:focus>