ID와 독립적 인 HTML 양식의 첫 번째 입력 요소에 초점을 설정하려면 어떻게해야합니까?

요소 의 ID를 몰라도 페이지를로드 할 때 첫 번째 입력 요소 (텍스트 상자, 드롭 다운 목록 등)에 웹 페이지 의 포커스 (입력 커서) 를 설정 하는 간단한 방법이 있습니까?

내 웹 응용 프로그램의 모든 페이지 / 양식에 대한 공통 스크립트로 구현하고 싶습니다.

jQuery 기반 방법을 시도 할 수도 있습니다.

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

이것이 질문에 대한 답은 아니지만 (일반적인 스크립트가 필요함), HTML5가 'autofocus'속성을 도입한다는 것을 다른 사람들이 아는 것이 유용 할 수 있습니다.

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

HTML5로 들어가면 더 많은 정보가 있습니다.

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

이것은 예를 들어 루프를 사용하여 다듬을 수 있습니다. 특정 유형의 필드, 비활성화 된 필드 등에 초점을 맞추지 않습니다. 실제로 수행 하는 필드에 class = "autofocus"를 추가하는 것이 더 좋습니다. 그 클래스 이름을 찾고 형태의 [I] .elements [J] 이상 희망이 집중 및 루프.

어쨌든 : 일반적으로 모든 페이지에서이 작업을 수행하는 것은 좋은 생각이 아닙니다. 입력에 초점을 맞추면 사용자는 예를 들어 능력을 잃게됩니다. 키보드에서 페이지를 스크롤하십시오. 예상치 못한 경우 이는 성 가실 수 있으므로 양식 필드를 사용하는 것이 사용자가 원하는 작업이 될 것이라고 확신 할 때만 자동 초점을 맞 춥니 다. 즉. 당신이 구글이라면.

내가 찾은 가장 포괄적 인 jQuery 표현식은 ( 여기 의 도움을 통해 )

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

당신이 사용하는 경우 프로토 타입 자바 스크립트 프레임 워크를 당신이 사용할 수있는 focusFirstElement의 방법 :

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

여기에 쓸만한 글이 있습니다. 웹 페이지의 첫 번째 입력에 초점 설정

숨겨진 입력도 건너 뛰어야합니다.

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

이 코드를 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>

위의 많은 답변을 시도했지만 작동하지 않았습니다. 에서이 일을 찾았 http://www.kolodvor.net/2008/01/17/set-focus-on-first-field-with-jquery/#comment-1317는 당신에게 Kolodvor 감사드립니다.

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

나는 이것을 사용하고있다 :

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

이것은 텍스트 영역 및 선택 상자를 포함하여 보이는 공통 입력 중 첫 번째를 가져옵니다. 이렇게하면 숨겨 지거나 비활성화되거나 읽기 전용이되지 않습니다. 또한 내 소프트웨어에서 사용하는 대상 div (즉,이 양식의 첫 번째 입력)를 허용합니다.

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

JSF2.2 +를 사용하고 자동 초점을 값이없는 속성으로 전달할 수없는 경우 다음을 사용하십시오.

 p:autofocus="true"

그리고 네임 스페이스 p에 추가합니다 (또한 자주 사용되는 pt. 원하는대로).

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

와 함께 AngularJS:

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

여기에는 텍스트 영역이 포함되고 라디오 버튼은 제외됩니다.

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

표시 속성을 확인하는 대신 clientHeight를 사용할 수 있어야합니다. 부모가이 요소를 숨길 수 있기 때문입니다.

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

타사 라이브러리가 없으면 다음과 같이 사용하십시오.

  const inputElements = parentElement.getElementsByTagName('input')
  if (inputChilds.length > 0) {
    inputChilds.item(0).focus();
  }

모든 양식 요소 태그를 고려하고 다른 답변과 같이 숨겨진 / 비활성화 된 태그를 배제하십시오.

jquery없이 (예 : 일반 자바 스크립트 사용) :

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

Safari에서는 작동하지만 Chrome 75에서는 작동하지 않습니다 (2019 년 4 월).