jQuery를 사용하여 페이지로드시 양식 입력 텍스트 필드에 집중하는 방법은 무엇입니까?

238

이것은 아마도 매우 간단하지만 페이지로드시 텍스트 상자에서 커서가 깜박이는 방법을 알려주는 사람이 있습니까?

— 크리스
소스

96

우리는 여기서 간단한 질문을 신경 쓰지 않습니다.

— DOK

아래 링크에서 sohail arif의 답변을 확인하십시오. stackoverflow.com/questions/18054459/…

— Sohail Arif

378

첫 번째 텍스트 필드에 초점을 설정하십시오.

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

첫 번째 텍스트 필드도 수행하지만 [0]을 다른 인덱스로 변경할 수 있습니다.

$('input[@type="text"]')[0].focus();

또는 ID를 사용할 수 있습니다 :

$("#someTextBox").focus();

— 독
소스

2

대화 상자를 사용하는 경우 위의 작업이 작동하지 않으면이 답변을 참조하십시오. stackoverflow.com/a/20629541/966609

— Matt Canty

1

$('input[type="text"]').get(0).focus(); ... 나를 위해 일함

— Rav

92

이를 위해 HTML5autofocus 를 사용할 수 있습니다 . jQuery 나 다른 JavaScript가 필요하지 않습니다.

<input type="text" name="some_field" autofocus>

IE9 이하에서는 작동하지 않습니다.

— 앤드류 리우
소스

자동 초점은 IE11 중 하나에서 작동하지 않습니다 stackoverflow.com/questions/34068302/...

— BA TabNabber

이것은 내 시나리오에서는 효과가 있지만 선택한 대답은 어떤 이유로 든 유효하지 않습니다.

— 비슈누 YS

27

확실한:

<head>
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#myTextBox").focus();
        });
    </script>
</head>
<body>
    <input type="text" id="myTextBox">
</body>

— 판딘 쿠스
소스

2

html 요소 다음에 스크립트를 가져 오는 것이 좋습니다.

— Ali Sheikhpour

1

@AliSheikhpour 스크립트는 dom ready 래퍼 내에 있으므로 html 요소 앞에 있는지는 중요하지 않지만 어쨌든 머리에 두지 않아야합니다.

— Popnoodles 2018 년

22

왜 모두가 이렇게 간단한 것에 jQuery를 사용 하는가?

<body OnLoad="document.myform.mytextfield.focus();">

— TD_ 니즈 보어
소스

15

질문에 jQuery로 태그가 지정되어 있기 때문입니다.

— Adarsh Madrecha

18

이를 수행하기 전에 사용자 인터페이스를 고려하십시오. jQuery의 ready()함수를 사용하여 문서를로드 할 때이 작업을 수행한다고 가정 합니다. 문서를로드하기 전에 사용자가 이미 다른 요소에 초점을 맞춘 경우 (완벽히 가능) 초점을 잃어 버리는 것은 매우 자극적입니다.

onfocus각 <input>요소에 속성 을 추가 하여 사용자가 이미 양식 필드에 초점을 맞추 었는지 여부를 기록한 다음 다음과 같은 경우 초점을 훔치지 않음으로이를 확인할 수 있습니다.

var anyFieldReceivedFocus = false;

function fieldReceivedFocus() {
    anyFieldReceivedFocus = true;
}

function focusFirstField() {
    if (!anyFieldReceivedFocus) {
        // Do jQuery focus stuff
    }
}


<input type="text" onfocus="fieldReceivedFocus()" name="one">
<input type="text" onfocus="fieldReceivedFocus()" name="two">

— 팀 다운
소스

2

귀하의 관점은 기술적으로 정확할뿐만 아니라 가능한 최고의 UX에 대한 귀하의 고려가 절묘합니다. 브라보!

— Folusho Oladipo

12

HTML :

  <input id="search" size="10" />

jQuery :

$("#search").focus();

— 브레 단
소스

1

html5를 사용 autofocus하는 경우 입력 요소에 속성을 추가하십시오 .

— Adarsh Madrecha

해당 속성은 어떻게 사용되며 부모 양식이 표시 되 자마자 집중된 요소가됩니까?

— Khom Nazid

8

오래된 질문에 부딪쳐서 죄송합니다. 나는 구글을 통해 이것을 발견했다.

또한 둘 이상의 선택기를 사용할 수 있으므로 특정 유형이 아닌 모든 양식 요소를 대상으로 지정할 수 있습니다.

예.

$('#myform input,#myform textarea').first().focus();

첫 번째 입력 또는 텍스트 영역에 초점을 맞추고 물론 다른 선택기를 믹스에 추가 할 수도 있습니다. 특정 요소 유형을 먼저 확신 할 수 없거나 다소 일반적인 / 재사용 가능한 것을 원한다면 Hnady.

— 앤드류 칼더
소스

훌륭한 제안 @Andrew.

— DOK

6

이것이 내가 선호하는 것입니다 :

<script type="text/javascript">
    $(document).ready(function () {
        $("#fieldID").focus(); 
    });
</script>

— 포베 요
소스

3

문서로드에 대한 <input>에 집중하기 위해 일을하는 것은 나쁜 방법입니다. autofocusHTML5에서 제공 한 속성을 사용하십시오

— OverCoder

3

입력 후 장소

<script type="text/javascript">document.formname.inputname.focus();</script>

— 빌 후작
소스

0

이것을 달성하는 간단하고 쉬운 방법

$('#button').on('click', function () {
    $('.form-group input[type="text"]').attr('autofocus', 'true');
});

— 무하마드 오 와이스
소스

0

줄 $('#myTextBox').focus()만으로는 커서를 텍스트 상자에 넣지 않고 대신 다음을 사용하십시오.

$('#myTextBox:text:visible:first').focus();

— 데이비드 ko 코
소스