jQuery : 버튼을 제외한 첫 번째 보이는 입력 / 선택 / 텍스트 영역을 찾는 방법은 무엇입니까?


87

나는 시도했다

$(":input:not(input[type=button],input[type=submit],button):visible:first")

하지만 아무것도 찾지 못합니다.

내 실수는 무엇입니까?

UPD : $ (document) .load ()에서 실행합니다.

<script type="text/javascript">
$(window).load(function () {
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

디버그에서 firstInput이 비어 있음을 알 수 있습니다.

UPD2 : 저는 Sharepoint에서 실행되는 ASP.NET 페이지에 있습니다.

나는 지금까지 일부 요소의 경우 (고정 된 요소의 경우) 찾고 일부는 찾지 못하는 것을 발견했습니다. :(


": input"대신 "input"을 사용 하시겠습니까?
Alec

잘 작동합니다. 문제는 다른 곳에 있습니다. 당신이 실행되지 않는 (가) $(document)이다 ready()?
BalusC

검색 할 특정 html이 있습니까?
Shiki

아마도 첫 번째 입력은 type="hidden"? 페이지를 마우스 오른쪽 버튼으로 클릭하고 소스를 봅니다. 생성 된 HTML도 중요합니다. 그것과 적절한 SSCCE 없이는 어둠 속에서 촬영하고 있습니다.
BalusC

답변:


166

원하는 것을 목표로 삼지 않는 이유는 무엇입니까 ( 데모 )?

$('form').find('input[type=text],textarea,select').filter(':visible:first');

편집하다

또는 jQuery : input 선택기를 사용 하여 양식 하위 항목을 필터링하십시오.

$('form').find('*').filter(':input:visible:first');

5
체크 박스? 라디오? 암호? 많은 새로운 HTML5 입력 유형은 말할 것도 없습니다.
BalusC

9
@BalusC $ ( 'form'). find ( ': input'). filter ( ': visible : first')
Abe Petrillo

1
이것은 어느 정도 작동하지만 tabindex 속성을 무시합니다.
eoleary

2
작지만 유용한 추가 : ': visible : first'대신 ': visible : enabled : first'가 더 나은 필터가 될 것입니다. 어떤 경우에는 상단 요소가 비활성화 될 수 있고 포커스가 거기로 이동할 수 없기 때문입니다.
Prahlad Yeri

1
@PrahladYeri 아마도 읽기 전용 제외':input:visible:enabled:not([readonly]):first'
JustinStolle

13

JQuery 코드는 괜찮습니다. 창로드 이벤트가 아닌 준비 처리기에서 실행해야합니다.

<script type="text/javascript">
$(function(){
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
});
</script>

최신 정보

Karim79 (예제 주셔서 감사합니다)의 예를 사용해 보았지만 잘 작동합니다 : http://jsfiddle.net/2sMfU/


3
@BalusC 감사합니다. 이제 직접 쏘겠습니다. 나 자신이 싫어. 나는 지난 한 시간 동안 작업 코드를 엉망으로 만들지 않았을 수 있었다. 나는 개에게 먹이를주고 부엌을 청소할 수있었습니다. 내가 이룰 수 있었던 것들이 많이 있습니다. 이제 내가 가진 것은 고통뿐입니다. 안녕, 영원히 .... 그리고 그래, 나는 들었 어야했다 .
karim79

@karim : rofl. 천만에요 :) Btw : 나는 이미 아이들을 목욕시키고, 침대에 데려오고, 개와 고양이에게 먹이를주고, 코카콜라를 가져갔습니다.)
BalusC

7

이것은 위의 요약이며 나를 위해 완벽하게 작동합니다. 정보에 대해서 감사드립니다!

<script language='javascript' type='text/javascript'>
    $(document).ready(function () {
        var firstInput = $('form').find('input[type=text],input[type=password],input[type=radio],input[type=checkbox],textarea,select').filter(':visible:first');
        if (firstInput != null) {
            firstInput.focus();
        }
    });
</script>

3

이것은 jQuery 1.5.2 에서 지정된 속성 이없는 요소를 :text선택 하기 때문에 @Mottie의 답변보다 개선되었습니다 (이 경우 암시 됨).inputtypetype="text"

$('form').find(':text,textarea,select').filter(':visible:first')

1

여기 내 해결책이 있습니다. 코드는 쉽게 따라 할 수 있지만 여기에 아이디어가 있습니다.

  • 모든 입력, 선택 및 텍스트 영역 가져 오기
  • 모든 버튼 및 숨겨진 필드 필터링
  • 활성화되고 보이는 필드로만 필터링
  • 첫 번째를 선택
  • 선택한 필드에 집중

코드:

function focusFirst(parent) {
    $(parent).find('input, textarea, select')
        .not('input[type=hidden],input[type=button],input[type=submit],input[type=reset],input[type=image],button')
        .filter(':enabled:visible:first')
        .focus();
}

그런 다음 부모 요소 또는 선택기로 focusFirst를 호출하면됩니다.

선택자:

focusFirst('form#aspnetForm');

요소:

var el = $('form#aspnetForm');
focusFirst(el);

0

아래 코드를 시도해 볼 수 있습니다 ...

$(document).ready(function(){
    $('form').find('input[type=text],textarea,select').filter(':visible:first').focus();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
    
<input type="submit" />
</form>

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