Cách đặt tiêu điểm thành đầu vào văn bản đầu tiên trong phương thức bootstrap sau khi được hiển thị

Tôi tải một phương thức bootstrap động và nó chứa ít đầu vào văn bản. Vấn đề tôi gặp phải là tôi muốn con trỏ tập trung vào đầu vào đầu tiên trong phương thức này và điều này không xảy ra theo mặc định.
Vì vậy, tôi đã viết mã này để làm điều đó:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

Nhưng bây giờ nó tập trung vào đầu vào trong giây lát rồi tự động biến mất, tại sao điều này lại xảy ra và cách giải quyết?

@scumah có câu trả lời cho bạn: Twitter bootstrap - Tập trung vào textarea bên trong một phương thức khi nhấp

Đối với Bootstrap 2

modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});  

Cập nhật: Đối với Bootstrap 3

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

========== Cập nhật ======

Để trả lời câu hỏi, bạn có thể sử dụng điều này với nhiều phương thức trên cùng một trang nếu bạn chỉ định các mục tiêu dữ liệu khác nhau, đổi tên các ID phương thức để phù hợp và cập nhật ID của các trường nhập biểu mẫu và cuối cùng cập nhật JS của bạn để phù hợp với những ID:
xem http://jsfiddle.net/panchroma/owtqhpzr/5/

HTML

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

JS

$('#myModal1').on('shown.bs.modal', function() {
  $('#textareaID1').focus();
})

Tôi đã tìm thấy cách tốt nhất để làm điều này mà không cần jQuery.

<input value="" autofocus>

hoạt động hoàn hảo.

Đây là một thuộc tính html5. Được hỗ trợ bởi tất cả các trình duyệt chính.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Câu trả lời của David Taiaroa là đúng, nhưng không hiệu quả vì thời gian để "mờ dần" phương thức không cho phép bạn tập trung vào đầu vào. Bạn cần tạo độ trễ:

$('#myModal').on('shown.bs.modal', function () {
    ...
    setTimeout(function (){
        $('#textareaID').focus();
    }, 1000);

})

Mã thông thường (bên dưới) không hoạt động đối với tôi:

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

Tôi đã tìm thấy giải pháp :

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

xem thêm tại đây

Tôi nhận được rằng bootstrap đã thêm thông tin sau trên trang của họ:

Do cách HTML5 xác định ngữ nghĩa của nó, thuộc tính HTML tự động lấy nét không có tác dụng trong các phương thức Bootstrap. Để đạt được hiệu quả tương tự, hãy sử dụng một số JavaScript tùy chỉnh:

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

http://getbootstrap.com/javascript/#modals

Đây là mã đơn giản sẽ phù hợp nhất với bạn trên tất cả các cửa sổ bật lên có bất kỳ trường đầu vào nào với việc lấy nét nó

$(".modal").on('shown.bs.modal', function () {
    $(this).find("input:visible:first").focus();
});

Tôi nghĩ câu trả lời đúng nhất, giả sử việc sử dụng jQuery, là sự hợp nhất các khía cạnh của tất cả các câu trả lời trong trang này, cộng với việc sử dụng sự kiện mà Bootstrap vượt qua:

$(document).on('shown.bs.modal', function(e) {
  $('input:visible:enabled:first', e.target).focus();
});

Nó cũng sẽ làm việc thay đổi $(document)để $('.modal')hoặc để thêm một lớp học để các phương thức mà các tín hiệu mà tập trung này nên xảy ra, giống như$('.modal.focus-on-first-input')

hãy thử mã này, nó có thể phù hợp với bạn

$(this).find('input:text')[0].focus();

Bước đầu tiên, bạn phải đặt autofocusthuộc tính của mình khi nhập biểu mẫu.

<input name="full_name" autofocus/>

Và sau đó bạn phải thêm khai báo để đặt tự động lấy nét cho đầu vào của bạn sau khi phương thức của bạn được hiển thị.
Hãy thử mã này:

$(document).on('ready', function(){
    // Set modal form input to autofocus when autofocus attribute is set
    $('.modal').on('shown.bs.modal', function () {
        $(this).find($.attr('autofocus')).focus();
    });
});

Nếu bạn muốn chỉ tự động lấy tiêu điểm bất kỳ phương thức nào đã được mở, bạn có thể đưa vào các mẫu hoặc hàm lib đoạn mã này sẽ tập trung vào đầu vào đầu tiên:

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:first').focus();
})

nếu bạn đang tìm kiếm một đoạn mã sẽ hoạt động cho tất cả các phương thức của mình và tự động tìm kiếm văn bản đầu vào đầu tiên trong văn bản đã mở, bạn nên sử dụng điều này:

$('.modal').on('shown.bs.modal', function () {
    $(this).find( 'input:visible:first').focus();
});

Nếu phương thức của bạn được tải bằng ajax, hãy sử dụng phương thức này để thay thế:

$(document).on('shown.bs.modal', '.modal', function() {
    $(this).find('input:visible:first').focus();
});

đây là giải pháp chung nhất

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});

• hoạt động với các phương thức được thêm vào DOM sau khi tải trang
• hoạt động với đầu vào, vùng văn bản, chọn và không với nút
• ommits ẩn, vô hiệu hóa, chỉ đọc
• hoạt động với các phương thức mờ dần, không cần setInterval

Cố gắng loại bỏ thuộc tính tabIndex của phương thức , khi đầu vào / hộp văn bản của bạn đang mở. Đặt nó trở lại như trước đây , khi bạn đóng input / textbox. Điều này sẽ giải quyết vấn đề không phân biệt phiên bản bootstrap và không ảnh hưởng đến luồng trải nghiệm người dùng .

Theo Bootstrap 4 docs:

Do cách HTML5 xác định ngữ nghĩa của nó, thuộc tính HTML tự động lấy nét không có tác dụng trong các phương thức Bootstrap. Để đạt được hiệu quả tương tự, hãy sử dụng một số JavaScript tùy chỉnh.

Ví dụ:

$('#idOfMyModal').on('shown.bs.modal', function () {
    $('input:first').trigger('focus')
});

Liên kết .

Sử dụng tính năng tự động lấy nét để tìm kiếm phần tử biểu mẫu phù hợp:

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• Nó là "#button" gọi biểu mẫu phương thức,

• "#mymodal" là dạng phương thức,

• "#myinput" là đầu vào bạn muốn lấy tiêu điểm