Đặt trọng tâm vào trường được tải động DIV

Question

Phương pháp thích hợp để đặt trọng tâm vào một trường cụ thể trong DIV được nạp động là gì?

$("#display").load("?control=msgs"); // loads the HTML into the DIV 
$('#display').fadeIn("fast"); // display it 
$("tex#header").focus();   // ?? neither that 
$("input#header").focus();  // ?? nor that 
$('#display', '#header').focus() // ?? nor that 
$("#header").focus();    // ?? nor that works 

HTML sau đây được nạp vào display DIV:

<div id="display"> 
<form id="newHeaderForm" class="dataform" action="/" method="post"> 
    <input id="to" type="hidden" value="22" name="to"/> 
    <dl> 
     <dt>Header</dt> 
     <dd> 
      <input id="header" class="large" type="text" name="header" value="" maxlength="128"/> 
     </dd> 
</form> 
</div> 

Nhiều, cảm ơn nhiều!

Answer 1

Hàm load() là một hàm không đồng bộ. Bạn nên đặt tiêu điểm sau khi cuộc gọi load() kết thúc, đó là hàm callback của load(), bởi vì nếu không thì phần tử mà bạn đang đề cập bởi #header, chưa tồn tại. Ví dụ:

$("#display").load("?control=msgs", {}, function() { 
    $('#header').focus(); 
}); 

Tôi có vấn đề bản thân mình ngay cả với giải pháp này, do đó, tôi đã làm một setTimeout trong callback và thiết lập tập trung trong thời gian chờ để làm/thực sự/chắc chắn nguyên tố này tồn tại.

Answer 2

Bạn đã thử chỉ cần chọn theo Id?

$("#header").focus(); 

Xem như Id nên là duy nhất, không cần phải có bộ chọn cụ thể hơn.

Answer 3

Nếu

$("#header").focus(); 

không hoạt động sau đó là có một yếu tố trên trang của bạn với id của tiêu đề?

Sử dụng firebug để chạy $("#header") và xem nội dung trả về.

Answer 4

Các mục được thêm động sẽ phải được thêm vào DOM ... clone().append() thêm nó vào DOM ... cho phép nó được chọn qua jquery.

Answer 5

$("#display").load("?control=msgs", {}, function() { 
    $('#header').focus(); 
}); 

tôi đã thử nó nhưng nó không hoạt động, vui lòng cho tôi thêm lời khuyên để giải quyết vấn đề này. cảm ơn sự giúp đỡ của bạn

Answer 6

Có, điều này xảy ra khi thao tác một phần tử chưa tồn tại (một vài cộng tác viên ở đây cũng tạo điểm tốt với ID duy nhất). Tôi đã gặp phải một vấn đề tương tự. Tôi cũng cần truyền một đối số cho hàm để thao tác với phần tử sớm được trả về.

Giải pháp được kiểm tra ở đây không giúp ích gì cho tôi. Cuối cùng tôi tìm thấy một trong đó đã làm việc ngay ra khỏi hộp. Và nó rất đẹp, quá - đóng cửa.

Thay vì:

$('#header').focus(); 
or the tempting: 
setTimeout($('#header').focus(), 500); 

Hãy thử điều này:

setTimeout(function() { $('#header').focus() }, 500); 

Trong mã của tôi, kiểm tra đi qua các lập luận, điều này đã không làm việc, thời gian chờ được bỏ qua:

setTimeout(alert('Hello, '+name), 1000); 

Công trình này, các lần hết thời gian chờ:

setTimeout(function() { alert('Hello, '+name) }, 1000); 

Nó hút rằng w3schools không đề cập đến nó.

Tín dụng đi tới: makemineatriple.com.

Hy vọng điều này sẽ giúp ai đó đến đây.

Martas

Answer 7

Như Omu chỉ ra, bạn phải thiết lập sự tập trung trong một hàm tài liệu sẵn sàng. jQuery cung cấp cho bạn. Và chọn một id. Ví dụ: nếu bạn có trang đăng nhập:

$(function() { $("#login-user-name").focus(); }); // jQuery rocks! 

Answer 8

Điều này chạy trên tải trang.

<script type="text/javascript"> 
    $(function() { 
     $("#header").focus(); 
    }); 
</script> 

Answer 9

$("#header").attr('tabindex', -1).focus(); 

Answer 10

$(function(){ 
    $('body').on('keypress','.sobitie_snses input',function(e){ 
     if(e.keyCode==13){ 
      $(this).blur(); 
      var new_fild = $(this).clone().val(''); 
      $(this).parent().append(new_fild); 
      $(new_fild).focus(); 
     } 
    }); 
}); 

hầu hết lỗi là vì U sử dụng đối tượng sai lầm khi thiết lập các prorepty hoặc chức năng. Sử dụng console.log (new_fild); để xem đối tượng U cố gắng thiết lập hàm prorepty hoặc hàm.