Menangkap kunci TAB di kotak teks [tertutup]

100

Saya ingin dapat menggunakan Tabkunci dalam kotak teks untuk tab lebih dari empat spasi. Dengan cara sekarang, tombol Tab akan melompati kursor saya ke input berikutnya.

Apakah ada beberapa JavaScript yang akan menangkap tombol Tab di kotak teks sebelum menggelembung ke UI?

Saya memahami beberapa browser (yaitu FireFox) mungkin tidak mengizinkan ini. Bagaimana dengan kombo tombol khusus seperti Shift+ Tab, atau Ctrl+ Q?

javascript user-interface

— Seibar
sumber

Jangan lupa untuk memeriksa jendela terfokus, dan biarkan itu menggelembung secara normal jika Anda tidak berada di area teks editor.

— FlySwat

Posting ini mendapat panji moderator sebagai "milik di meta.stackoverflow.com," tetapi usianya sudah lebih dari dua tahun, jadi saya tidak memigrasikannya.

— Robert Harvey

108

Bahkan jika Anda merekam keydown/ keyupevent, itu adalah satu-satunya kejadian yang diaktifkan tombol tab, Anda masih memerlukan beberapa cara untuk mencegah tindakan default, pindah ke item berikutnya dalam urutan tab, terjadi.

Di Firefox, Anda dapat memanggil preventDefault()metode pada objek acara yang diteruskan ke pengendali kejadian Anda. Di IE, Anda harus mengembalikan false dari event handle. Pustaka JQuery menyediakan preventDefaultmetode pada objek acara yang berfungsi di IE dan FF.

<body>
<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>
</body>

— ScottKoon
sumber

1

Saya baru saja mengoreksi baris 4, dari "if (el.attachEvent)" menjadi "if (myInput.attachEvent)"

— Fenton

Perhatikan kode ini menambahkan TAB hanya di bagian akhir. Ini tidak nyaman di banyak kesempatan.

— Alexander Palamarchuk

@SteveFenton Apakah ada cara sederhana untuk menghapus spasi lagi dengan keycode 8?

— yckart

18

Saya lebih suka tab indentasi tidak berfungsi daripada merusak tab di antara item formulir.

Jika Anda ingin memasukkan kode ke dalam kotak penurunan harga, gunakan Ctrl+ K(atau ⌘K di Mac).

Dalam hal benar-benar menghentikan tindakan, jQuery (yang digunakan Stack Overflow) akan menghentikan peristiwa menggelembung saat Anda mengembalikan false dari callback peristiwa. Ini membuat hidup lebih mudah untuk bekerja dengan banyak browser.

— Lauren
sumber

13

Jawaban sebelumnya baik-baik saja, tetapi saya salah satu dari orang-orang yang sangat menentang perilaku pencampuran dengan presentasi (menempatkan JavaScript di HTML saya) jadi saya lebih suka meletakkan logika penanganan acara saya di file JavaScript saya. Selain itu, tidak semua browser mengimplementasikan peristiwa (atau e) dengan cara yang sama. Anda mungkin ingin melakukan pemeriksaan sebelum menjalankan logika apa pun:

document.onkeydown = TabExample;

function TabExample(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var tabKey = 9;
  if(evt.keyCode == tabKey) {
    // do work
  }
}

— Tom
sumber

6

Saya akan menyarankan agar tidak mengubah perilaku default kunci. Saya melakukan sebanyak mungkin tanpa menyentuh mouse, jadi jika Anda membuat tombol tab saya tidak pindah ke bidang berikutnya pada formulir, saya akan sangat jengkel.

Namun, tombol pintasan bisa berguna, terutama dengan blok kode yang besar dan bersarang. Shift-TAB adalah opsi yang buruk karena biasanya membawa saya ke bidang sebelumnya pada formulir. Mungkinkah tombol baru pada editor WMD untuk memasukkan kode-TAB, dengan tombol pintas, akan memungkinkan?

— Wally Lawless
sumber

1

Pertanyaannya sepenuhnya bergantung pada aplikasi. Saya sedang mengerjakan kontrol editor kode. Saya tidak memberikan tombol tab dan semua siswa saya mengeluh. Saya tidak melakukannya karena saya tidak ingin merusak aksesibilitas untuk satu siswa saya yang tunanetra. Saya sekarang telah menambahkan dukungan tab, tetapi juga memberikan opsi preferensi pengguna untuk mematikannya.

— Charles

@Charles sangat bagus tentang implikasi aksesibilitas.

— Wally Lawless

4

ada masalah dalam jawaban terbaik yang diberikan oleh ScottKoon

ini dia

} else if(el.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Seharusnya

} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Karena itu, ini tidak berfungsi di IE. Berharap ScottKoon akan memperbarui kode

— chintan123
sumber

3

Di Chrome di Mac, alt-tab menyisipkan karakter tab ke dalam <textarea>bidang.

Ini dia: . Wee!

— Paul D. Waite
sumber