Có cách nào đơn giản để đặt tiêu điểm (con trỏ đầu vào) của trang web trên phần tử đầ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 biết id của phần tử đó không?
Tôi muốn triển khai nó như một tập lệnh chung cho tất cả các trang / biểu mẫu ứng dụng web của tôi.
Câu trả lời:
Bạn cũng có thể thử phương pháp dựa trên jQuery:
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
});
Mặc dù điều này không trả lời câu hỏi (yêu cầu một tập lệnh chung), tôi mặc dù có thể hữu ích cho những người khác khi 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>
autofocusmà không có giá trị spring:form. autofocus="autofocus"hoạt động tốt, mặc dù. Cảm ơn, @Jacob.
document.forms[0].elements[0].focus();
Điều này có thể được tinh chỉnh bằng cách sử dụng một vòng lặp để ví dụ. không tập trung vào một số loại trường nhất định, trường bị vô hiệu hóa, v.v. Tốt hơn có thể để thêm một class = "tự động lấy nét" đến lĩnh vực bạn thực sự làm muốn tập trung, và vòng lặp so với các dạng [i] .elements [j] tìm kiếm className đó.
Nhưng dù sao thì: thông thường không phải là ý kiến hay khi làm điều này trên mọi trang. Khi bạn tập trung một đầ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, vì vậy 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à điều người dùng muốn làm. I E. nếu bạn là Google.
Biểu thức jQuery toàn diện nhất mà tôi thấy đang hoạt động là (thông qua sự trợ giúp ở đây )
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
Nếu bạn đang sử dụng khung JavaScript Prototype thì bạn có thể sử dụng phương thức focusFirstElement :
Form.focusFirstElement(document.forms[0]);
Có một bản ghi ở đây có thể được sử dụng: Đặt Tiêu điểm thành Đầu vào Đầu tiên trên Trang Web
Bạn cũng cần bỏ qua bất kỳ đầu vào ẩn nào.
for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
whilecâu lệnh?
Đặt mã này vào cuối bodythẻ của bạn sẽ tự động tập trung phần tử được kích hoạt không ẩn, có thể nhìn thấy đầu tiên 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ời gian 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>
Đã thử rất nhiều câu trả lời ở trên và chúng không hoạt động. Tìm thấy cái 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();
Tôi đang sử dụng cái này:
$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
Điều này nhận được đầu tiên của bất kỳ đầu vào chung nào có thể nhìn thấy, bao gồm các textareas 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 đích mà tôi sử dụng trong phần mềm của mình (tức là, đầu vào đầu tiên bên trong biểu mẫu này).
$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])",
target).first().focus();
Đối với những người sử dụng JSF2.2 + và không thể chuyển tự động lấy nét làm thuộc tính không có giá trị của nó, hãy sử dụng điều này:
p:autofocus="true"
Và thêm nó vào không gian tên p (Cũng thường dùng pt. Bất cứ thứ gì bạn thích).
<html ... xmlns:p="http://java.sun.com/jsf/passthrough">
Điều này bao gồm các textareas và không bao gồm 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(); }
});
Bạn có thể sử dụng clientHeight thay vì kiểm tra thuộc tính display, vì cha mẹ có thể đang ẩn phần 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;
}
}
}
}
}
Nếu không có lib của bên thứ ba, hãy sử dụng những thứ như
const inputElements = parentElement.getElementsByTagName('input')
if (inputChilds.length > 0) {
inputChilds.item(0).focus();
}
Đảm bảo rằng bạn xem xét tất cả các thẻ phần tử biểu mẫu, loại trừ những thẻ bị ẩn / bị vô hiệu hóa như trong các câu trả lời khác, v.v.
không có jquery, ví dụ với javascript thông thường:
document.querySelector('form input:not([type=hidden])').focus()
hoạt động trên Safari nhưng không hoạt động trên Chrome 75 (tháng 4 năm 2019)