JavaScript는 HTML 양식 요소에 중점을 둡니다.

331

텍스트 상자가있는 웹 양식이 있습니다. 기본적으로 텍스트 상자에 포커스를 설정하는 방법은 무엇입니까?

이 같은:

<body onload='setFocusToTextBox()'>

아무도 도와 줄 수 있습니까? JavaScript로 텍스트 상자에 포커스를 설정하는 방법을 모르겠습니다.

<script>
function setFocusToTextBox(){
//What to do here
}
</script>

— 텐 스타
소스

21

간단합니다 document.getElementById('your_text_box_id').focus();.

— Teemu

575

이 작업을 수행.

당신의 요소가 이와 같은 경우 ..

<input type="text" id="mytext"/>

당신의 스크립트는

<script>
function setFocusToTextBox(){
    document.getElementById("mytext").focus();
}
</script>

— mohkhan
소스

3

당신은 웹 API의 다른 부분을 사용하여 문서를 (예를 들어, 스캔해야 할 것 Document.forms, Document.getelementsByTagName또는 Node.childNodes) 일부 요소의 특정 속성에 대한 알려진 문서 구조 나 모양에 의존 하나.

— peterph 2016 년

40

또는 명백한 대답은 ... ID를 제공합니다;)

— 관련

4

ID가 너무 지정되어 있으므로 사용하지 않는 것이 좋습니다. 대신 이름이나 클래스를 사용하십시오. 이 경우 document.querySelector ( "[name = 'myText']") 또는 document.querySelector ( ". myText")를 사용하여 입력 요소에 대한 참조를 가져옵니다.

— Chris Love

12

@ChrisLove 재미있는 조언. ID가 "지정된"이유는 무엇이며 정확히 무엇이 문제입니까? 더 간단하고 정확하며 코드를 찾는 코드가 ID가 있으면 약간 더 빠릅니다. 가능하다면 가장 분명하고 현명한 일처럼 들립니다.

— PandaWood

4

@ChrisLove 이것은 CSS 선택자를 과도하게 지정하지 않고 HTML ID 속성을 설정합니다. 특이성은 CSS 처리가 DOM 선택기를 구문 분석하는 방식의 문제이며, HTML에서 ID 및 클래스 속성의 작동 방식에는 문제가 없습니다. JS를 연결하는 것과 동일한 DOM 선택기를 사용하여 CSS를 연결하는 것은 바람직하지 않습니다. 이는 설명하는 차별화를 유지할 수 있음을 의미합니다.

— Toni Leigh

142

가치있는 것을 위해 autofocusHTML5 호환 브라우저 에서 속성을 사용할 수 있습니다 . 버전 10부터 IE에서도 작동합니다.

<input name="myinput" value="whatever" autofocus />

— 더 나은 올리버
소스

51

페이지가 처음로드 될 때 포커스를 설정하는 경우에만 작동합니다. 나중에 입력에 대한 응답으로 초점을 설정하는 데 사용할 수 없습니다.

— Martin Carney

나는 두려워 자동 초점 속성이 호환되지 않습니다 해요 IOS 사파리 (있는 경우 caniuse.com/#search=autofocus .focus ()가 오페라 미니 (그냥 호환되지 않는 동안) caniuse.com/#search=focus )

— lfrodrigues

3

콘솔에서 초점을 맞추려고하면 불가능합니다!

— 또는 Choban

65

일반적으로 텍스트 상자에 초점을 맞출 때도 스크롤로 스크롤해야합니다

function setFocusToTextBox(){
    var textbox = document.getElementById("yourtextbox");
    textbox.focus();
    textbox.scrollIntoView();
}

도움이되는지 확인하십시오.

— 칸 TO
소스

2

필드가 화면을 벗어난 경우 작은 화면에서 실제 두통이 발생할 수 있습니다 :-)

— Toni Leigh

고정 된 헤더 막대가있는 경우 textbox.scrollIntoView (false)를 사용해야 할 수 있습니다. 그러면 요소가 맨 위가 아닌 맨 아래로 설정됩니다.

— DeadlyChambers

30

코드가 다음과 같은 경우 :

<input type="text" id="mytext"/>

그리고 JQuery를 사용하는 경우 이것을 사용할 수도 있습니다.

<script>
function setFocusToTextBox(){
    $("#mytext").focus();
}
</script>

먼저 입력을 그려야합니다. $(document).ready()

— 리차드 레베 코
소스

11

기본 질문에 jQuery가 원격으로 영향을 미치지 않기 때문에 이것을 하향 투표했습니다. OP는 순수하게 자바 스크립트를 유지하고 싶었다

— Fallenreaper

11

글쎄, 당신은 이유가 있습니다, 내가 잘못했지만 어쨌든 도움이 될 것이라고 생각합니다.

— Richard Rebeco 2016 년

4

jQuery가 이미 사용되고 프로젝트를 jQuery 선택 객체로 사용하는 프로젝트에서 바닐라 JS를 사용하는 대신 일관성을 유지 하는 것이 더 좋기 때문에 이것을 찬성합니다.

— paradite

8

egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrectstackoverflow의 도움말 센터에 따르면 @Fallenreaper Downvotes는입니다 . 나는 그 범주 근처 에이 곳을 찾지 못했습니다. 도움은 OP에만 국한되지 않습니까?

— Gellie Ann

@GellieAnn 정답이지만 OP 질문의 범위를 벗어납니다. 그가 바닐라 자바 스크립트를 사용하는 이유가 있으며, 다른 프레임 워크를 언급하고 포인터 또는 힌트를 제공하여 그 이유를 제시 할 수 있지만 그 이유를 제시해야하지만 여전히 질문 범위 내에서 답변을 해결해야합니다. 그러므로 나는 나의 downvote를지지한다.

— Fallenreaper

20

일반 자바 스크립트의 경우 다음을 시도하십시오.

window.onload = function() {
  document.getElementById("TextBoxName").focus();
};

— 모금
소스

3

나는 이것을 이것을 사용했다.

<html>
  <head>
    <script type="text/javascript">
      function focusFieldOne() {
        document.FormName.FieldName.focus();
      }
    </script>
  </head>

  <body onLoad="focusFieldOne();">
    <form name="FormName">
      Field <input type="text" name="FieldName">
    </form>
  </body>
</html>

즉, HTML 5에서 autofocus 속성을 사용할 수 있습니다.

참고 :이 예제를 보여주는이 오래된 스레드를 업데이트하고 여전히 이것을 읽는 사람들을위한 더 새롭고 쉬운 업데이트를 업데이트하고 싶습니다. ;)

— RajnishCoder
소스

1

앞에서 언급했듯이 document.forms도 작동합니다.

function setFocusToTextBox( _element ) {
  document.forms[ 'myFormName' ].elements[ _element ].focus();
}

setFocusToTextBox( 0 );
// sets focus on first element of the form

— 맥
소스

AFAIK 양식에는 "이름"속성이 없습니다

— Marecky

양식은 이제 오랫동안 "이름"을 가졌으며 HTML5에서는 여전히 그렇습니다.

— Mac

1

경우 <input>또는 <textarea>속성은 한 id=mytext다음 사용

mytext.focus();

코드 스 니펫 표시

function setFocusToTextBox() {
    mytext.focus();
}

<body onload='setFocusToTextBox()'>
  <form>
    <input type="text" id="mytext"/>
  </form>
</body>

스 니펫 확장

— 카밀 키에브 스키
소스

0

window.onload는 처음에 초점을 맞추는 것입니다 .blur는 텍스트 영역 외부를 클릭하는 동안 초점을 맞추는 것입니다.

    <textarea id="focus"></textarea>
    <script>
     var mytexarea=document.getElementById("focus");
    window.onload=function()
    {

    mytexarea.focus();

    }

mytextarea.onblur=function(){

mytextarea.focus();

}
    </script>

— ßãlãjî
소스