Làm cách nào để đặt tiêu điểm thành phần tử đầu vào đầu tiên trong biểu mẫu HTML độc lập với id?

Question

Có cách đơn giản để đặt tiêu điểm (con trỏ đầu vào) của trang web trên thành phần đầu vào đầu tiên (hộp văn bản, danh sách thả xuống, ...) khi tải trang mà không cần phải biết id của phần tử ?

Tôi muốn triển khai nó như một kịch bản chung cho tất cả các trang/biểu mẫu của ứng dụng web của tôi.

Answer 1

Bạn cũng có thể thử phương pháp jQuery dựa trên:

$(document).ready(function() { 
    $('form:first *:input[type!=hidden]:first').focus(); 
}); 

Answer 2

Có một ghi-up ở đây mà bạn có thể sử dụng: Set Focus to First Input on Web Page

Answer 3

document.forms[0].elements[0].focus(); 

này có thể được tinh chế sử dụng một vòng lặp để ví dụ. không tập trung một số loại trường, trường bị vô hiệu hóa, v.v. Tốt hơn có thể thêm lớp = "tự động lấy nét" vào trường bạn thực sự do muốn tập trung và lặp lại các biểu mẫu [i] .elements [j] tìm kiếm className đó.

Dù sao đi nữa: thường thì không nên làm điều này trên mọi trang. Khi bạn tập trung đầu vào, người dùng sẽ mất khả năng ví dụ. cuộn trang từ bàn phím. Nếu không mong muốn, điều này có thể gây phiền nhiễu, do đó, chỉ tự động lấy nét khi bạn khá chắc chắn rằng việc sử dụng trường biểu mẫu sẽ là những gì người dùng muốn thực hiện. I E. nếu bạn là Google.

Answer 4

Bạn cũng cần bỏ qua mọi thông tin nhập ẩn.

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++); 
document.forms[0].elements[i].focus(); 

Answer 5

Nếu bạn đang sử dụng khuôn khổ JavaScript Prototype sau đó bạn có thể sử dụng phương pháp focusFirstElement:

Form.focusFirstElement(document.forms[0]); 

Answer 6

Đưa mã này vào cuối thẻ body của bạn sẽ tập trung đầu tiên có thể nhìn thấy, không ẩn tự động bật phần tử trên màn hình. Nó sẽ xử lý hầu hết các trường hợp tôi có thể đưa ra trong thông báo ngắn.

<script> 
    (function(){ 
     var forms = document.forms || []; 
     for(var i = 0; i < forms.length; i++){ 
      for(var j = 0; j < forms[i].length; j++){ 
       if(!forms[i][j].readonly != undefined && forms[i][j].type != "hidden" && forms[i][j].disabled != true && forms[i][j].style.display != 'none'){ 
        forms[i][j].focus(); 
        return; 
       } 
      } 
     } 
    })(); 
</script> 

Answer 7

Khái niệm jQuery toàn diện nhất mà tôi thấy làm việc là (thông qua sự giúp đỡ của hơn here)

$(document).ready(function() { 
    $('input:visible:enabled:first').focus(); 
}); 

Answer 8

Mặc dù điều này doesn' t trả lời câu hỏi (yêu cầu một tập lệnh phổ biến), mặc dù nó có thể hữu ích cho người khác biết rằng HTML5 giới thiệu thuộc tính 'tự động lấy nét':

<form> 
    <input type="text" name="username" autofocus> 
    <input type="password" name="password"> 
    <input type="submit" value="Login"> 
</form> 

Dive in to HTML5 có thêm thông tin.

Answer 9

Đây là mục nhập đầu tiên của bất kỳ đầu vào phổ biến hiển thị nào, bao gồm cả các hộp văn bản và các hộp chọn. Điều này cũng đảm bảo chúng không bị ẩn, bị vô hiệu hóa hoặc chỉ đọc. nó cũng cho phép một div mục tiêu, mà tôi sử dụng trong phần mềm của tôi (ví dụ, đầu vào đầu tiên bên trong của biểu mẫu này).

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus(); 

Answer 10

Đã thử nhiều câu trả lời ở trên và chúng không hoạt động. Tìm thấy mục này tại: http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317 Cảm ơn bạn Kolodvor.

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

Answer 11

Tôi đang sử dụng này:

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus(); 

Answer 12

Với AngularJS:

angular.element('#Element')[0].focus(); 

Answer 13

này bao gồm textareas và loại trừ các nút radio

$(document).ready(function() { 
    var first_input = $('input[type=text]:visible:enabled:first, textarea:visible:enabled:first')[0]; 
    if(first_input != undefined){ first_input.focus(); } 
}); 

Answer 14

Đối với những người sử dụng JSF2. 2+ và không thể vượt qua tự động ofocus như một thuộc tính không có giá trị cho nó, sử dụng thuộc tính này:

p:autofocus="true" 

Và thêm nó vào không gian tên p (Cũng thường được sử dụng pt. Dù bạn thích gì).

<html ... xmlns:p="http://java.sun.com/jsf/passthrough"> 

Answer 15

Bạn sẽ có thể sử dụng clientHeight thay vì kiểm tra các thuộc tính hiển thị, kể từ khi cha mẹ có thể được ẩn yếu tố này:

function setFocus() { 
    var forms = document.forms || []; 
     for (var i = 0; i < forms.length; i++) { 
      for (var j = 0; j < forms[i].length; j++) { 
      var widget = forms[i][j]; 
       if ((widget && widget.domNode && widget.domNode.clientHeight > 0) && typeof widget.focus === "function") 
       && (typeof widget.disabled === "undefined" || widget.disabled === false) 
       && (typeof widget.readOnly === "undefined" || widget.readOnly === false)) { 
         widget.focus(); 
         break; 
       } 
      } 
     } 
    } 
}