jQuery: bagaimana menemukan tombol input / pilih / textarea pertama yang terlihat?

88

Saya mencoba

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

tetapi tidak menemukan apa pun.

Apa kesalahan saya

UPD: Saya menjalankan ini di $ (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>

dan di debug saya bisa melihat firstInput kosong.

UPD2: Saya berada di halaman ASP.NET yang dijalankan di bawah Sharepoint.

Saya telah menemukan sejauh ini bahwa untuk beberapa elemen ia menemukannya (untuk yang tetap) dan untuk beberapa tidak. :(

jquery input jquery-selectors Artem
sumber
Coba "input" daripada ": input"?
Alec
Seharusnya bekerja dengan baik. Masalah Anda ada di tempat lain. Apakah Anda tidak menjalankan ini sebelum itu $(document)adalah ready()?
BalusC
Apakah Anda memiliki html khusus untuk dicari?
Shiki
Mungkin masukan pertama adalah type="hidden"? Klik kanan halaman dan lihat sumber. HTML yang dihasilkan juga penting. Tanpa itu dan SSCCE yang tepat , itu memotret dalam kegelapan.
BalusC

Jawaban:

168

Mengapa tidak hanya menargetkan yang Anda inginkan ( demo )?

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

Sunting

Atau gunakan jQuery : selektor input untuk memfilter turunan formulir.

$('form').find('*').filter(':input:visible:first');
Mottie
sumber
5
Kotak centang? Radio? Kata sandi? Belum lagi banyaknya jenis input HTML5 baru.
BalusC
9
@BalusC $ ('form'). Find (': input'). Filter (': visible: first')
Abe Petrillo
1
Meskipun ini berfungsi sampai taraf tertentu, ini mengabaikan atribut tabindex.
eoleary
2
Nitpick kecil tetapi tambahan yang berguna: daripada ': visible: first', ': visible: enabled: first' akan menjadi filter yang jauh lebih baik karena elemen atas dapat dinonaktifkan dalam beberapa kasus dan fokus tidak dapat bergeser ke sana.
Prahlad Yeri
1
@PrahladYeri Mungkin juga mengecualikan hanya baca':input:visible:enabled:not([readonly]):first'
JustinStolle
13

Kode JQuery baik-baik saja. Anda harus mengeksekusi di penangan siap bukan di acara pemuatan jendela.

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

Memperbarui

Saya mencoba dengan contoh Karim79 (terima kasih untuk contohnya) dan berfungsi dengan baik: http://jsfiddle.net/2sMfU/

PeterFromCologne
sumber
3
Terima kasih @BalusC. Aku akan menembak diriku sendiri sekarang. Aku membenci diriku sendiri. Saya bisa menghabiskan satu jam terakhir tidak mengotak-atik kode kerja. Saya bisa saja memberi makan anjing saya, membersihkan dapur saya. Ada banyak hal yang bisa saya capai. Sekarang yang saya miliki hanyalah rasa sakit. Selamat tinggal, selamanya .... Dan ya, saya seharusnya mendengarkan.
karim79
@karim: rofl. Sama-sama :) Btw: Saya sudah memandikan anak-anak saya, membawa mereka ke tempat tidur, memberi makan anjing dan kucing, dan mengambil coca cola untuk saya sendiri;)
BalusC
7

Ini adalah ringkasan saya di atas dan bekerja dengan sempurna untuk saya. Terimakasih atas infonya!

<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>
Ben Foster
sumber
3

Ini merupakan peningkatan dari jawaban @ Mottie karena mulai jQuery 1.5.2 :textmemilih inputelemen yang tidak memiliki typeatribut tertentu (dalam hal type="text"ini tersirat):

$('form').find(':text,textarea,select').filter(':visible:first')
Mike Slinn
sumber
1

Inilah solusi saya. Kode harus cukup mudah untuk diikuti tetapi inilah idenya:

  • dapatkan semua masukan, pemilihan, dan area teks
  • menyaring semua tombol dan bidang tersembunyi
  • filter ke hanya bidang yang aktif dan terlihat
  • pilih yang pertama
  • fokuskan bidang yang dipilih

Kode:

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

Kemudian cukup panggil focusFirst dengan elemen induk atau selektor Anda.

Pemilih:

focusFirst('form#aspnetForm');

Elemen:

var el = $('form#aspnetForm');
focusFirst(el);
J Adam Rogers
sumber
0

Anda dapat mencoba kode di bawah ini ...

$(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>
Luaskan cuplikan

Mahbub
sumber