Làm cách nào để tập trung vào trường văn bản nhập mẫu khi tải trang bằng jQuery?

238

Điều này có lẽ rất đơn giản, nhưng ai đó có thể cho tôi biết làm thế nào để con trỏ nhấp nháy trên hộp văn bản khi tải trang không?

— chris
nguồn

96

Chúng tôi không ngại những câu hỏi đơn giản ở đây.

— DOK

Kiểm tra trả lời từ sohail arif trên liên kết dưới đây: stackoverflow.com/questions/18054459/ory

— Sohail Arif

379

Đặt tiêu điểm vào trường văn bản đầu tiên:

 $("input:text:visible:first").focus();

Trường này cũng thực hiện trường văn bản đầu tiên, nhưng bạn có thể thay đổi [0] thành chỉ mục khác:

$('input[@type="text"]')[0].focus();

Hoặc, bạn có thể sử dụng ID:

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

— NỮ
nguồn

2

Nếu sử dụng hộp thoại, vui lòng xem câu trả lời này nếu phần trên không hoạt động stackoverflow.com/a/20629541/966609

— Matt Canty

1

$('input[type="text"]').get(0).focus(); ... làm việc cho tôi

— Rav

91

Bạn có thể sử dụng HTML5autofocus cho việc này. Bạn không cần jQuery hoặc JavaScript khác.

<input type="text" name="some_field" autofocus>

Lưu ý điều này sẽ không hoạt động trên IE9 và thấp hơn.

— Andrew Liu
nguồn

tự động lấy nét không hoạt động trong IE11 hoặc stackoverflow.com/questions/34068302/NH

— BA TabNabber

Điều này hoạt động cho kịch bản của tôi nhưng câu trả lời được chọn không vì một số lý do.

— Vishnu YS

27

Chắc chắn rồi:

<head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#myTextBox").focus();
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>

— Gấu trúc
nguồn

2

Tôi khuyên bạn nên mang tập lệnh sau phần tử html.

— Ali Sheikhpour

1

Tập lệnh @AliSheikhpour nằm trong trình bao bọc sẵn sàng, do đó, không có vấn đề gì trước phần tử html, nhưng dù sao nó cũng không nên ở trong đầu.

— Popnoodles

22

Tại sao mọi người sử dụng jQuery cho một cái gì đó đơn giản như thế này.

<body OnLoad="document.myform.mytextfield.focus();">

— TD_Nijboer
nguồn

15

Bởi vì câu hỏi được gắn thẻ là jQuery.

— Adarsh Madrecha

18

Hãy suy nghĩ về giao diện người dùng của bạn trước khi bạn làm điều này. Tôi giả sử (mặc dù không có câu trả lời nào nói như vậy) rằng bạn sẽ làm điều này khi tải tài liệu bằng ready()chức năng của jQuery . Nếu người dùng đã tập trung vào một yếu tố khác trước khi tài liệu được tải (điều này là hoàn toàn có thể) thì việc họ bị mất tập trung là vô cùng khó chịu.

Bạn có thể kiểm tra điều này bằng cách thêm onfocuscác thuộc tính trong từng <input>thành phần của bạn để ghi lại xem người dùng đã tập trung vào trường biểu mẫu hay chưa và sau đó không lấy cắp tiêu điểm nếu chúng có:

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;
}

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff
    }
}


<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">

— Tim xuống
nguồn

2

Quan điểm của bạn không chỉ đúng về mặt kỹ thuật, mà sự xem xét của bạn về UX tốt nhất có thể là tuyệt vời. Bravo!

— Folusho Oladipo

12

HTML:

  <input id="search" size="10" />

jQuery:

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

— brendan
nguồn

1

Nếu sử dụng html5, chỉ cần thêm autofocusthuộc tính cho phần tử đầu vào?

— Adarsh Madrecha

Thuộc tính đó được sử dụng như thế nào và nó có trở thành yếu tố tập trung ngay khi biểu mẫu mẹ của nó xuất hiện không?

— Khom Nazid

8

Xin lỗi vì đã trả lời một câu hỏi cũ. Tôi tìm thấy điều này qua google.

Cũng đáng lưu ý rằng có thể sử dụng nhiều hơn một bộ chọn, do đó bạn có thể nhắm mục tiêu bất kỳ thành phần biểu mẫu nào, và không chỉ một loại cụ thể.

ví dụ.

$('#myform input,#myform textarea').first().focus();

Điều này sẽ tập trung đầu vào hoặc textarea đầu tiên mà nó tìm thấy, và tất nhiên bạn cũng có thể thêm các bộ chọn khác vào hỗn hợp. Hnady nếu bạn không thể chắc chắn về một loại phần tử cụ thể là đầu tiên, hoặc nếu bạn muốn một cái gì đó hơi chung chung / có thể tái sử dụng.

— Andrew Calder
nguồn

Đề xuất tuyệt vời @Andrew.

— DOK

6

Đây là những gì tôi thích sử dụng:

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

— poveilleux
nguồn

3

Đó là cách tồi để làm mọi thứ, để tập trung vào <input> khi tải tài liệu, chỉ cần sử dụng autofocusthuộc tính được cung cấp bởi HTML5

— OverCoder

3

đặt sau khi đầu vào

<script type="text/javascript">document.formname.inputname.focus();</script>

— Hầu tước Bill
nguồn

0

Cách đơn giản và dễ dàng nhất để đạt được điều này

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});

— Muhammad Owais
nguồn

0

Một $('#myTextBox').focus()mình dòng sẽ không đặt con trỏ vào hộp văn bản, thay vào đó sử dụng:

$('#myTextBox:text:visible:first').focus();

— David Sopko
nguồn