Một số lý do cho jquery .focus() không hoạt động?

Question

Một số suy nghĩ là ELEMENT_ID.focus() nằm bên trong các div bị ẩn vào một số thời điểm nhất định.

này phải là một vấn đề dễ giải quyết - nhưng tôi đang gặp khó khăn :(

*** đang hoạt động tốt -. Lĩnh vực văn bản không được tập trung vào việc khi tải trang lên

STEP1 [SOLVED] JAVASCRIPT:

$("#goal-input").focus(); 

$('#goal-input').keypress(function(event){ 
var keycode = (event.keyCode ? event.keyCode : event.which); 
    if(keycode == '13') { 
etc, etc, etc 
} 

HTML

<input type="text" id="goal-input" name="goal" /> 

[STEP2] JAVASCRIPT:

if (goal) { 
      step1.fadeOut('fast', function() { 
      step1.hide(); 
      step2.fadeIn('fast'); 

etc, etc 

HTML:

<div id="step-2"> 
     <div class="notifications"> 
     </div> 
     <input type="text" id="name" name="name" placeholder="Name" /> 
       <script type="text/javascript"> 
       $(function(){ 
       $("#name").focus(); 
       }); 
      </script> 

Tại sao không bước 2 làm việc? :(

Answer 1

bạn cần phải hoặc đặt mã dưới dạng HTML hoặc tải nếu sử dụng các sự kiện tải tài liệu:.

<input type="text" id="goal-input" name="goal" /> 
<script type="text/javascript"> 
$(function(){ 
    $("#goal-input").focus(); 
}); 
</script> 

Cập nhật:

Chuyển đổi div không kích hoạt sự kiện tải tài liệu vì mọi thứ đã được tải. Bạn cần tập trung nó khi bạn chuyển div:

if (goal) { 
     step1.fadeOut('fast', function() { 
      step1.hide(); 
      step2.fadeIn('fast', function() { 
       $("#name").focus(); 
      }); 
     }); 
} 

Answer 2

Hãy thử một cái gì đó như thế này khi bạn đang áp dụng tập trung theo cách đó nếu nguyên tố này được ẩn, nó sẽ không ném ra một lỗi:

$("#elementid").filter(':visible').focus(); 

Nó có thể làm cho ý nghĩa hơn để làm cho nguyên tố này có thể nhìn thấy, mặc dù mà sẽ yêu cầu mã cụ thể để bố trí của bạn

Answer 3

Đừng quên rằng trường đầu vào phải hiển thị trước, sau đó bạn có thể lấy nét trường đó.

$("#elementid").show(); 
$("#elementid input[type=text]").focus(); 

Answer 4

Tôi gặp sự cố khi kích hoạt tập trung vào yếu tố (đầu vào biểu mẫu) đang chuyển đổi sang trang. Tôi thấy nó có thể sửa được bằng cách gọi sự kiện lấy nét từ bên trong một setTimeout mà không có sự chậm trễ nào trên nó. Khi tôi hiểu nó (từ, ví dụ: this answer), điều này sẽ trì hoãn chức năng cho đến khi hàng đợi thực thi hiện tại kết thúc, vì vậy trong trường hợp này nó trì hoãn sự kiện lấy nét cho đến khi quá trình chuyển đổi hoàn tất.

setTimeout(function(){ 
    $('#goal-input').focus(); 
}); 

Answer 5

tôi thấy rằng focus không hoạt động khi cố gắng để có được một tập trung vào một yếu tố văn bản (chẳng hạn như một thông báo div) nhưng hoạt động khi tập trung vào các lĩnh vực đầu vào.