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

84

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

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

javascript  html  forms  focus 
— Splattne
소스
7
사용자가 양식을보기 위해 페이지를 아래로 스크롤해야하는 방식으로 양식이 페이지에 배치 된 경우, 포커스를 설정하면 앵커처럼 페이지가 자동으로 아래로 스크롤됩니다. 이는 사용자가 해당 페이지에 도달하면 양식 위치로 즉시 스크롤되는 것을 볼 수 있기 때문에 좋지 않습니다. Safari와 FF에서 테스트했습니다 (IE7은 페이지 스크롤을 수행하지 않습니다).
— Marco Demaio 2010-06-05
@Marco_Demaio 내 웹 앱은 모든 페이지에 창 상단 근처에 입력 상자가있는 방식으로 구성되어 있습니다.
— splattne
3
사용자가 브라우저 창 높이를 768px보다 작은 크기로 조정하면 어떻게 될까요? 페이지는 포커스를 설정 한 위치로 스크롤됩니다. 어쨌든 나는 당신이 그런 사소한 문제에 대해 몰랐을 경우에만 경고하고 싶었습니다. 나는 몇 가지 테스트를하기 전에도 그것에 대해 몰랐습니다.
— Marco Demaio 2010 년

답변:

96

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

$(document).ready(function() {
    $('form:first *:input[type!=hidden]:first').focus();
});
— Marko Dumic
소스
효과가있다! 웹 애플리케이션에 jQuery를 통합하기 시작했습니다. 그래서 저는이 접근법을 고수 할 것이라고 생각합니다! 감사합니다, Marko!
— splattne
3
이 경우 페이지의 첫 번째 양식이 숨겨지면 어떻게됩니까? 또는 양식의 첫 번째 요소가 CSS를 통해 숨겨져 있다면? 확실히 이것은 실패 할 것입니다. 나는 당연히 현학적이지만 그게 내가 굴리는 방법입니다.
— James Hughes
제 경우에는 (ASP.NET 사용) 숨겨지지 않는 양식이 하나뿐입니다. 그래서 이것은 나를 위해 작동합니다.
— splattne
@Jame Hughes, 함수로 작성하고 필요할 때 호출 할 수 있으며 예외를 만들 수 있습니다. 저에게이 솔루션은 정말 도움이되었습니다.
— Luci
이것은 어떤 이유로 나를 위해 작동하지 않습니다. 커서가 보이지 않아야합니다.
— 크리스
136

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

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

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

— 제이콥 스탠리
소스
2
autofocus는 attributename입니다. 그 값은 어떻습니까? autofocus = true와 같은 Somethig가 필요하지 않습니까? 값을 설정하지 않는다는 것은 무엇을 의미합니까?
— Geek
4
HTML5에서 일부 속성은 값을 가질 필요가 없습니다. 'checked'는이 경우에 또 다른 속성입니다. 값이 꺼져 있으면 이름과 동일하다는 것을 의미한다고 생각합니다 (예 : autofocus = "autofocus"및 checked = "checked").
— Jacob Stanley
.NET에서 autofocus값없이 사용하려고하면 내 Spring 앱이 중단됩니다 spring:form. autofocus="autofocus"그래도 잘 작동합니다. 감사합니다, @Jacob.
— Sergei Tachenov
2
@Geek autofocus 속성은 다른 많은 속성과 마찬가지로 부울 속성 유형입니다. 그렇기 때문에 값을 할당하는 것이 아니라 선언적인 방식으로 만 사용됩니다. 자세한 내용은 w3c 사양을 참조하세요. w3.org/TR/html5/infrastructure.html#boolean-attribute
— n1kkou
34 
document.forms[0].elements[0].focus();

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

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

— Bobince
소스
3
질문에 jquery 태그가 없으므로 정답이어야합니다.
— Kalle H. Väravas
@ KalleH.Väravas 아니요, 문제에서 찾을 수없는 가정을하기 때문에 반대표를 받아야합니다. 적어도 하나의 양식이 있습니다. 일반적으로 작동하지 않습니다.
— 9ilsdx 9rvj 0lo
18

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

$(document).ready(function() {
    $('input:visible:enabled:first').focus();
});
— ngeek
소스
1
나는 이것을 사용하고 있었고 테이블에 1000 개 이상의 확인란이 많을 때 IE에서 매우 느리게 실행된다는 것을 알았습니다. 무엇을해야할지 모르겠다면 첫 번째 입력 필드에 집중하는 것을 포기해야 할 수도 있습니다.
— Sam Watkins 2014
5

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

for (var i = 0; document.forms[0].elements[i].type == 'hidden'; i++);
document.forms[0].elements[i].focus();
— Marko Dumic
소스
내가 틀렸을 수도 있지만, form [0]에 숨겨진 입력이없는 경우이 루프는 동작을 정의하지 않았습니다.
— xtofl
바로 그거죠. 숨겨진 선행 입력을 건너 뛰는 데 사용됩니다. 그리고 양식에 숨겨지지 않은 필드가 있다는 가정하에 작성되었습니다. jQuery로도 할 수 있었지만 (다른 답변을 게시 할 것입니다) jQuery가 관련되기를 원한다고 언급하지 않았습니다.
— Marko Dumic
1
@MarkoDumic while문장을 사용할 수 있는데 왜 메모리를 낭비 합니까?
— Lucio
3

이 코드를 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>
— 제임스 휴즈
소스
1
여기서 고려해야 할 한 가지는 숨겨져 있지 않지만 조상이있는 요소와 일치 할 수 있다는 것입니다. 이를 위해서는 DOM을 백업하고 각 조상 가시성을 테스트해야합니다. 이러한 상황에 대해 심각한 과잉이라고 생각합니다.
— James Hughes
<input type = "text"readonly = "readonly">는 어떻습니까? 이러한 경우를 코드에 추가해야한다고 생각합니다. 일반적으로 사람들은 읽기 전용 입력 텍스트 필드에 초점을 맞추기를 원하지 않습니다. 어쨌든 멋진 코드와 +1 감사합니다!
— Marco Demaio
안된하지만 난 형태로 업데이트 [I] [J] 대해 .readonly = 정의되지 않은!의!
— 제임스 휴즈
3

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

$("form:first *:input,select,textarea").filter(":not([readonly='readonly']):not([disabled='disabled']):not([type='hidden'])").first().focus();
— 로버트 브루 커
소스
2

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

$("input:visible:enabled:not([readonly]),textarea:visible:enabled:not([readonly]),select:visible:enabled:not([readonly])", 
    target).first().focus();
— 데이브 K
소스
1

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

 p:autofocus="true"

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

<html ... xmlns:p="http://java.sun.com/jsf/passthrough">
— 페더
소스
0

와 함께 AngularJS:

angular.element('#Element')[0].focus();
— EpokK
소스
0

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

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

표시 속성을 확인하는 대신 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;
                }
            }
        }
    }   
}
— 더쿨
소스
0

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

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

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

— Cghislai
소스
0

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

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

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

— localhostdotdev
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.