Question

在加载时，是否有一种简单的方法在第一个输入元素（文本框，下拉列表，...）上设置网页的焦点（输入光标）页面无需知道元素的ID？

我想将它作为我的网页应用程序的所有页面/表单的通用脚本实现。

Answer 1

虽然这不回答问题（需要一个通用脚本），但我知道HTML5引入'autofocus'属性可能对其他人有用：

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

Dive in to HTML5有更多信息。

Answer 2

您还可以尝试基于jQuery的方法：

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

Answer 3

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

这可以使用循环来改进，例如。不关注某些类型的字段，禁用字段等。更好的方法是将class =“autofocus”添加到实际做想要聚焦的字段中，然后循环遍历表单[i] .elements [j]查找该className。

无论如何：在每个页面上执行此操作通常不是一个好主意。当您关注输入时，用户失去了例如。从键盘滚动页面。如果出乎意料，这可能很烦人，因此只有在您确定使用表单字段将成为用户想要做的事情时才会自动对焦。即。如果你是谷歌。

Answer 4

我发现最全面的jQuery表达式（通过over here）

的帮助

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

Answer 5

如果您使用的是Prototype JavaScript框架，则可以使用focusFirstElement方法：

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

Answer 6

这里有一篇可能有用的文章：Set Focus to First Input on Web Page

Answer 7

您还需要跳过任何隐藏的输入。

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

Answer 8

尝试了很多上面的答案，但他们没有工作。在http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317找到了这个谢谢Kolodvor。

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

Answer 9

将此代码放在body标记的末尾会自动将第一个可见的非隐藏启用元素集中在屏幕上。它将处理我能在短时间内提出的大多数情况。

<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 10

这是第一个可见的常见输入，包括textareas和select box。这也确保它们不会被隐藏，禁用或只读。它还允许我在我的软件中使用的目标div（即，在此表单内部的第一个输入）。

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

Answer 11

我正在使用它：

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

Answer 12

我需要为在我页面上的模态 div 中动态显示的表单解决这个问题，不幸的是，当通过更改 autofocus 显示包含的 div 时，display 没有得到尊重属性（至少不是在 Chrome 中）。我不喜欢任何需要我的代码来推断我应该将焦点设置到哪个控件的解决方案，因为隐藏或零大小输入的复杂性等。我的解决方案是设置 autofocus 属性无论如何，在我的输入上，然后在显示 div 时在我的代码中设置焦点：

form.querySelector('*[autofocus]').focus();

Answer 13

对于那些使用JSF2.2 +并且无法将自动聚焦作为没有值的属性传递给它的人，请使用：

 p:autofocus="true"

并将其添加到命名空间p（也经常使用pt。无论你喜欢什么）。

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

Answer 14

使用AngularJS：

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

Answer 15

这包括textareas和排除单选按钮

$(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 16

您应该能够使用clientHeight而不是检查display属性，因为父级可能隐藏了这个元素：

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;
                }
            }
        }
    }   
}

Answer 17

没有第三方库，请使用类似

public class Record {   
private ObjectId Mongoid;
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private long id;
@JsonProperty("eventVersion")
private String eventVersion;
@JsonProperty("userIdentity")
private UserIdentity userIdentity;
@JsonProperty("eventTime")
private String eventTime;
@JsonProperty("eventSource")
private String eventSource;
@JsonProperty("eventName")
private String eventName;
@JsonProperty("awsRegion")
private String awsRegion;
@JsonProperty("sourceIPAddress")
private String sourceIPAddress;
@JsonProperty("userAgent")
private String userAgent;
@JsonProperty("requestParameters")
private RequestParameters requestParameters;
@JsonProperty("additionalEventData")
private AdditionalEventData additionalEventData;
@JsonProperty("requestID")
private String requestID;
@JsonProperty("eventID")
private String eventID;
@JsonProperty("resources")
private List<Resource> resources = new ArrayList<Resource>();
@JsonProperty("eventType")
private String eventType;
@JsonProperty("recipientAccountId")
private String recipientAccountId;
@JsonProperty("sharedEventID")
private String sharedEventID;

/**
 * No args constructor for use in serialization
 * 
 */
public Record() {
}


public Record(String eventVersion, UserIdentity userIdentity, String 
eventTime, String eventSource, String eventName, String awsRegion, String 
sourceIPAddress, String userAgent, RequestParameters requestParameters, 
AdditionalEventData additionalEventData, String requestID, String eventID, 
List<Resource> resources, String eventType, String recipientAccountId, 
String sharedEventID) {
    super();
    this.eventVersion = eventVersion;
    this.userIdentity = userIdentity;
    this.eventTime = eventTime;
    this.eventSource = eventSource;
    this.eventName = eventName;
    this.awsRegion = awsRegion;
    this.sourceIPAddress = sourceIPAddress;
    this.userAgent = userAgent;
    this.requestParameters = requestParameters;
    this.additionalEventData = additionalEventData;
    this.requestID = requestID;
    this.eventID = eventID;
    this.resources = resources;
    this.eventType = eventType;
    this.recipientAccountId = recipientAccountId;
    this.sharedEventID = sharedEventID;
}

/**
 * setters & getters 
 * 
 */

请确保您考虑了所有表单元素标签，并排除了隐藏/禁用的标签，例如其他答案等。

Answer 18

没有jquery，例如使用常规的javascript：

document.querySelector('form input:not([type=hidden])').focus()

可在Safari上运行，但不能在Chrome 75（2019年4月）上运行

如何将焦点设置为独立于id的HTML表单中的第一个输入元素？

18 个答案: