$ .f Focus () không hoạt động

Các ví dụ cuối cùng của jQuery focus()tài liệu quốc gia

$('#id').focus()

nên làm cho đầu vào tập trung (hoạt động). Tôi dường như không thể làm việc này.

Ngay cả trong bảng điều khiển trên trang web này, tôi đang thử nó cho hộp tìm kiếm

$('input[name="q"]').focus()

và tôi chẳng nhận được gì. Có ý kiến ​​gì không?

Trên thực tế, ví dụ bạn đưa ra để tập trung vào trang web này chỉ hoạt động tốt, miễn là bạn không tập trung vào bảng điều khiển. Lý do không hoạt động đơn giản là vì nó không lấy cắp trọng tâm từ bảng điều khiển dev. Nếu bạn chạy mã sau trong bảng điều khiển và sau đó nhấp nhanh vào cửa sổ trình duyệt của mình sau đó, bạn sẽ thấy nó tập trung vào hộp tìm kiếm:

setTimeout(function() { $('input[name="q"]').focus() }, 3000);

Đối với người khác của bạn, một điều khiến tôi gặp rắc rối trong quá khứ là thứ tự của các sự kiện. Bạn không thể gọi tiêu điểm () trên một phần tử chưa được gắn vào DOM. Phần tử bạn đang cố tập trung đã được gắn vào DOM chưa?

Tìm thấy một giải pháp ở nơi khác trên mạng ...

$('#id').focus();

đã không làm việc.

$('#id').get(0).focus();

Đã làm việc.

Một số câu trả lời ở đây đề nghị sử dụng setTimeoutđể trì hoãn quá trình tập trung vào phần tử đích. Một trong số họ đề cập rằng mục tiêu nằm trong hộp thoại phương thức. Tôi không thể bình luận thêm về tính chính xác của setTimeoutgiải pháp mà không biết chi tiết cụ thể về nơi nó được sử dụng. Tuy nhiên, tôi nghĩ rằng tôi nên cung cấp một câu trả lời ở đây để giúp đỡ những người chạy vào chủ đề này giống như tôi đã làm

Thực tế đơn giản của vấn đề là bạn không thể tập trung vào một yếu tố chưa nhìn thấy được . Nếu bạn gặp phải vấn đề này, đảm bảo rằng mục tiêu thực sự hiển thị khi nỗ lực tập trung vào nó được thực hiện. Trong trường hợp của riêng tôi, tôi đã làm một cái gì đó dọc theo những dòng này

$('#elementid').animate({left:0,duration:'slow'});
$('#elementid').focus();

Điều này đã không làm việc. Tôi chỉ nhận ra những gì đang xảy ra khi tôi thực hiện $ ('# Elementid'). Focus () `từ bảng điều khiển đã hoạt động. Sự khác biệt - trong mã của tôi ở trên mục tiêu, không có gì chắc chắn rằng mục tiêu sẽ còn nguyên vẹn được hiển thị do hoạt ảnh có thể không hoàn thành . Và có manh mối

$('#elementid').animate({left:0,duration:'slow',complete:focusFunction});

function focusFunction(){$('#elementid').focus();}

hoạt động đúng như mong đợi. Ban đầu tôi cũng đã đặtsetTimeout giải pháp và nó cũng hoạt động. Tuy nhiên, thời gian chờ được chọn tùy ý chắc chắn sẽ phá vỡ giải pháp sớm hay muộn tùy thuộc vào mức độ chậm của thiết bị chủ trong quá trình đảm bảo rằng phần tử đích có thể nhìn thấy được.

nếu bạn sử dụng bootstrap + modal, điều này có hiệu quả với tôi:

  $(myModal).modal('toggle');
  $(myModal).on('shown.bs.modal', function() {
    $('#modalSearchBox').focus()
  });

Chỉ trong trường hợp có ai khác vấp phải câu hỏi này và có tình huống tương tự tôi gặp phải - tôi đã cố gắng đặt tiêu điểm sau khi nhấp vào yếu tố khác, nhưng tiêu điểm dường như không hoạt động. Hóa ra tôi chỉ cần một e.preventDefault();- đây là một ví dụ:

$('#recipients ul li').mousedown(function(e) {
    // add recipient to list
    ...
    // focus back onto the input
    $('#message_recipient_input').focus();
    // prevent the focus from leaving
    e.preventDefault();
});

Điều này đã giúp:

Nếu bạn gọi HTMLEuity.f Focus () từ trình xử lý sự kiện mousedown, bạn phải gọi event.preventDefault () để giữ tiêu điểm rời khỏi HTMLEuity. Nguồn: https://developer.mozilla.org/en/docs/Web/API/HTMLEuity/f Focus

Tôi nhận ra điều này là cũ, nhưng đã đi qua nó ngày hôm nay. Không có câu trả lời nào phù hợp với tôi, điều tôi tìm thấy có hiệu quả là setTimeout. Tôi muốn sự tập trung của mình được đặt vào đầu vào được đệ trình của một phương thức, sử dụng setTimeout hoạt động. Hi vọng điêu nay co ich!

Tôi cũng đã từng gặp phải vấn đề này. Giải pháp hoạt động trong trường hợp của tôi là sử dụng thuộc tính tabindex trên phần tử HTML.

Tôi đã sử dụng ng-repeatcho một số phần tử li trong danh sách và tôi không thể tập trung vào li đầu tiên bằng cách sử dụng .f Focus (), vì vậy tôi chỉ cần thêm thuộc tính tabindex cho mỗi li trong vòng lặp.

vậy bây giờ <li ng-repeat="user in users track by $index" tabindex="{{$index+1}}"></li>

+1 đó là chỉ mục bắt đầu từ 0. Ngoài ra, hãy đảm bảo rằng phần tử có trong DOM trước khi gọi hàm .f Focus ()

Tôi hi vọng cái này giúp được.

Đối với những người có vấn đề không hoạt động vì bạn đã sử dụng "$ (phần tử) .show ()". Tôi đã giải quyết nó theo cách tiếp theo:

 var textbox = $("#otherOption");
 textbox.show("fast", function () {
    textbox[0].focus();
  });

Vì vậy, bạn không cần bộ hẹn giờ, nó sẽ thực thi sau khi phương thức hiển thị hoàn thành.

Thêm một độ trễ trước khi lấy nét (). 200 ms là đủ

function focusAndCursor(selector){
  var input = $(selector);
  setTimeout(function() {
    // this focus on last character if input isn't empty
    tmp = input.val(); input.focus().val("").blur().focus().val(tmp);
  }, 200);
}

Có vấn đề này một lần nữa và tin hay không, tất cả những gì tôi phải làm là đóng các công cụ dành cho nhà phát triển. Rõ ràng tab Console có mức độ ưu tiên tập trung so với nội dung trang.

Hãy chắc chắn rằng các yếu tố và cha mẹ của nó được nhìn thấy. Bạn không thể sử dụng tập trung vào các yếu tố ẩn

GIẢI PHÁP BỔ SUNG Có cùng một vấn đề trong đó tiêu điểm () dường như không hoạt động nhưng cuối cùng hóa ra rằng điều cần thiết là cuộn đến đúng vị trí:

• https://stackoverflow.com/a/43342974/1335717

Đối với trường hợp của tôi, tôi đã phải chỉ định một chỉ mục tab ( -1nếu chỉ có thể tập trung qua tập lệnh)

<div tabindex='-1'>
<!-- ... -->
</div>