Kiểm tra xem phần tử DOM có tập trung

Question

Tôi có hộp văn bản hộp đèn được hiển thị bằng cách sử dụng cuộc gọi AJAX từ ASP.NET UpdatePanel hay không. Khi hộp đèn được hiển thị, tôi sử dụng phương thức focus() của hộp văn bản nằm trong hộp đèn để đưa tiêu điểm vào hộp văn bản ngay lập tức.

Khi ở trong Firefox, hộp văn bản sẽ được lấy tiêu điểm mà không có vấn đề gì. Trong IE, hộp văn bản không lấy tiêu điểm trừ khi tôi sử dụng

setTimeout(function(){txtBx.focus()}, 500); 

để làm cho phương pháp lấy nét cháy sau đó, sau khi phần tử DOM đã được tải tôi giả định. Vấn đề là, ngay trên dòng đó, tôi đã kiểm tra xem liệu phần tử là null/undefined, vì vậy đối tượng đã tồn tại nếu nó chạm vào dòng đó, nó sẽ không cho phép chính nó lấy tiêu điểm ngay lập tức vì một lý do nào đó.

Rõ ràng đặt hẹn giờ để "khắc phục" sự cố này không phải là cách tốt nhất hoặc thanh lịch nhất để giải quyết vấn đề này. Tôi muốn có thể thực hiện một số việc như sau:

var txtBx = document.getElementById('txtBx'); 

if (txtPassword != null) { 
    txtPassword.focus(); 
    while (txtPassword.focus === false) { 
     txtPassword.focus(); 
    } 
} 

Có cách nào để nói rằng hộp văn bản có tiêu điểm để tôi có thể làm điều gì đó như trên không?

Hoặc tôi đang nhìn vào điều này một cách sai lầm?

Chỉnh sửa
Để làm rõ, tôi không gọi mã khi tải trang. Kịch bản là ở đầu trang, tuy nhiên nó nằm bên trong một hàm được gọi khi postback Asynchronous của ASP.NET hoàn tất, không phải khi trang tải.

Bởi vì điều này được hiển thị sau khi cập nhật Ajax, DOM nên đã được tải, vì vậy tôi giả định rằng sự kiện $(document).ready() của jQuery sẽ không hữu ích ở đây.

Answer 1

Thử đặt javascript đặt tiêu điểm ở cuối trang thay vì bắt đầu hoặc kích hoạt sau khi sự kiện được tải trang. Điều đó sẽ giúp đảm bảo rằng DOM được tải hoàn toàn trước khi thiết lập tiêu điểm.

Tôi đã sử dụng FastInit cho việc này. JQuery $ (tài liệu) .ready() cũng sẽ hoạt động.

Answer 2

bạn có thể thử một cái gì đó như thế này [IE cụ thể]. (Chưa được kiểm tra)

theAjaxCreatedElement.onreadystatechange = function() { 
    if (this.readyState != "complete") 
     return; 
    this.focus(); 
}; 

Một cách khác có thể là để thay đổi màu nền của phần tử với onfocus, sau đó lấy nó bằng séc js nếu nó là những gì nó nên được, nếu không nói là: tái tập trung phần tử.

Answer 3

Bạn có thể thử này:

1. Sử dụng các sự kiện endRequest của PageRequestManager. Sự kiện đó sẽ kích hoạt khi bản cập nhật Ajax đã kết thúc.
2. Tập trung vào hộp văn bản trong xử lý sự kiện

Dưới đây là một số mẫu mã:

<script type="text/javascript"> 
    function onRequestEnd() 
    { 
    var txtBx = $get('txtBx'); 
    txtBx.focus(); 
    } 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onRequestEnd); 
</script> 

Tập trung vào hộp văn bản ban đầu bạn có thể sử dụng pageLoad chức năng (phím tắt để sự kiện load của khách hàng Application đối tượng bên cạnh):

<script type="text/javascript"> 
function pageLoad() 
{ 
    var txtBx = $get('txtBx'); 
    txtBx.focus(); 
} 
</script> 

Answer 4

Có một số điều trong IE, mẹo đó:

1. Nếu tập trung phần tử có khác nhau z-index - bạn có thể nhanh chóng thiết lập z-index như của phần tử hiện tập trung (có thể thiết lập 'ẩn' thuộc tính), thiết lập lấy nét, và sau đó đặt nó trở lại z- gốc mục lục.

2. Cố gắng làm mờ() phần tử hiện được lấy nét.

3. Nếu phần tử được 'shimmed' - hãy tập trung phần tử 'shim'.

Answer 5

Dường như IE không cập nhật DOM cho đến khi tập lệnh kết thúc chạy. Do đó, việc kiểm tra vòng lặp cho tiêu điểm sẽ không cho phép DOM cập nhật. Sử dụng setTimeout có lẽ là giải pháp làm việc duy nhất.

Ví dụ của bạn với .focus() là một ví dụ nổi tiếng, xem ví dụ: this answer.

Answer 6

Bạn đã thử thêm thuộc tính autofocus="autofocus" vào phần tử hộp văn bản mà bạn đang gọi qua Ajax chưa?

Thông thường, khi tôi cần một số chức năng JavaScript bổ sung để chạy trên nội dung động, tôi sẽ chỉ thêm JavaScript đó vào nội dung đang được gọi.

JavaScript đó cũng sẽ thực thi sau khi được thêm vào DOM. Tôi không thấy một điểm bằng cách viết JavaScript cho tệp gốc của bạn và sau đó "nghe" các thay đổi đối với DOM. Như bạn đã đề cập, setTimeout() có nhiều hack hơn bất cứ thứ gì khác như thế này :)