Mengetik karakter tab di kotak teks browser

89

Banyak waktu, ketika saya ingin memformat teks dalam kotak teks halaman web saya akan menekan Tabtombol.

Sayangnya, itu tidak menyisipkan karakter tab tetapi memindahkan kontrol ke elemen bentuk berikutnya (seperti tombol atau kotak centang).

Untuk peramban seperti Firefox / IE, apakah ada cara untuk mendapatkan perilaku pemformatan tab, dalam kotak teks, dengan mengetikkan kombinasi tombol?

Rohit
sumber

Jawaban:

10

Tabinta adalah add-on Firefox yang memungkinkan Anda melakukan ini.

membalikkan
sumber
4
Ada solusi untuk Chrome?
sorin
2
@SorinSbarnea: Lihat jawaban saya
Janus Troelsen
Ini tidak kompatibel dengan Firefox lagi.
rory.ap
Ini adalah plugin yang berfungsi di Firefox 64: addons.mozilla.org/en-US/firefox/addon/textarea-tabbing
Stefan_Fairphone
Plugin ini tidak ada lagi (tidak ada salahnya jawabannya, sudah hampir satu dekade sejak pertanyaan dijawab dan Firefox telah banyak berubah).
aoeu
63

Di Windows, Anda dapat menekan Alt+ 09. Ini hanya bekerja dengan tombol angka pad nomor. (Lepaskan Altsetelah menekan tombol angka terakhir.)

ta.speot.is
sumber
3
Pastikan Anda menggunakan tombol NumPad
CatamountJack
@ Chris: Ketika saya mengikuti instruksi yang tepat, itu tidak memasukkan karakter tab, tetapi bertindak seperti tombol tab. Apakah Anda mencoba ini di browser web?
Casebash
@ Kasebash Ini berfungsi di jendela komentar ini, di Chrome, di Windows 7 x64.
Chris
2
Hanya jika Anda memiliki Windows dan keyboard dengan numpad.
Siput mekanik
1
... dan jika Anda menggunakan Chrome. FF melihatnya seperti tombol tab, IE sepertinya tidak melakukan apa-apa. Sekali lagi, +1 untuk mengingatkan hack lama ini :)
Halil Özgür
50

Linux dan sistem POSIX lainnya (kecuali Mac OS):

Untuk memasukkan tab di aplikasi GTK + (seperti Firefox atau Chrome):

  1. Ctrl+ Shift+U

  2. Tipe 9

  3. Tekan SpaceatauEnter

Sumber: Wikipedia: Masukan Unicode

Janus Troelsen
sumber
Ini berfungsi tetapi tidak berguna untuk membuat indentasi beberapa baris sekaligus.
MYGz
13

Di Safari dan Firefox di Mac OS X, Anda dapat menekan ControlOptionTabuntuk memasukkan tab di bidang teks yang sedang Anda edit.

Daniel Beck
sumber
7
Sepertinya ini tidak berfungsi di Chrome 50 di El Cap
jcollum
1
Maupun di Firefox 53 di Sierra.
Jason R. Coombs
1
@ JasonR.Coombs Masih berfungsi di Safari, jadi aman untuk menganggap ada perubahan di Firefox dalam empat tahun sejak saya menulis jawaban ini.
Daniel Beck
9

Buka Notepad atau editor teks serupa, dan mulai dokumen kosong baru. Jenis Tab. Salin karakter tab Anda ke clipboard. (Pada Windows, Ctrl+ A, Ctrl+ Cakan melakukan ini).

Sekarang kembali ke textarea di browser Anda. Posisikan kursor di tempat yang Anda inginkan, dan rekatkan karakter tab. ( Ctrl+ Vdi Windows).

Voila, selesai!

Lakukan
sumber
1
Ciro, apakah itu rusak untuk kotak teks biasa dan bidang input teks, atau hanya elemen "contenteditable"? Karena jika itu hanya masalah untuk "contenteditable", itu mungkin tidak mempengaruhi banyak orang (OP misalnya)
Doin
2
Ini adalah solusi paling sederhana, kecuali Anda harus sering melakukan ini.
jcollum
8

Ada plugin Chrome yang disebut Textarea Code Formatter .

Ini memungkinkan Anda memasukkan tab ke dalam kotak teks di browser Chrome. Ini juga memungkinkan Anda untuk menyorot banyak baris dan menyisipkan tab sebelum setiap baris yang dipilih.

Namun, masalah yang sering Anda inginkan adalah perilaku penyisipan tab standar. Jika Anda menggunakan tab untuk beralih di antara kotak, maka Anda dapat memilih "dinonaktifkan" secara default di opsi.

Jeromy Anglim
sumber
4

Jika itu situs Anda:

Plugin jQuery: http://teddevito.com/demos/textarea.html

jQuery(document).ready(function () {

     $("textarea").tabby();

});

Muat jQuery dan plugin terlebih dahulu, lalu Anda bisa tab dan membuat tab, dan menggeser + tab ke "untab" seolah-olah.

Untuk dukungan di seluruh browser, Anda harus menggunakan ekstensi, skrip pengguna, plugin, dll. Seperti: 46704 untuk Greasemonkey .

Grizly
sumber
Tautannya sudah mati. Ada apa dengan semua hal jQuery ini. Pasti ada cara untuk menerima tab menggunakan JavaScript biasa. Plugin jQuery selalu baik untuk solusi yang sudah diterapkan, tetapi sebenarnya bukan solusi.
Triynko
Coba kepala ini: stackoverflow.com/a/13130
Grizly
1

Keuntungan besar dari Tabinta di Firefox adalah Anda dapat memetakan karakter tab ke hotkey lain, karena Anda benar-benar tidak ingin kehilangan perilaku default kunci tab di browser.

Dengan Internet Explorer Anda tidak memiliki solusi dalam hal ekstensi browser yang saya ketahui. Di sini satu-satunya cara adalah menyimpan karakter tab di clipboard dengan menyalinnya sebelumnya dari beberapa program lain seperti notepad.

solusi javascript membutuhkan nama kotak teks di mana mereka akan bertindak, jadi ini jauh dari ideal atau praktis. Meskipun kombinasi alt kode kunci di bawah kedua browser masih menjalankan aktivitas penekanan tombol karakter tab normal sehingga keduanya tidak berfungsi.

A Dwarf
sumber
1

Saya telah sedikit mengacaukan AutoHotkey untuk mendapatkan kemampuan ini, dan satu-satunya solusi 'anti peluru' yang saya temukan adalah benar-benar menempel (tidak mengirim) karakter tab itu sendiri.

;
; TAB character
; pasted from clipboard
; win tab
;
#tab::
old_clip:=clipboard
clipboard:=A_Tab
clipWait
sendInput,^v
clipboard:=old_clip
clipWait
return

Ternyata ikatan AHK ini bahkan berguna dalam editor teks yang menangani keystroke TAB ekstra; misalnya. IDE yang dikonfigurasi untuk menggunakan autoindent-by-space.

myf
sumber
0

Tab Grabber agak seperti Tabinta, hanya untuk Chrome (memungkinkan TAB di bidang textarea).

SiteKickr
sumber
0

Untuk mengetikkan tombol tab di kotak teks, Anda dapat menggunakan skrip seperti ini (kotak teks yang menerima tombol tab dinamai txtLongText):

[VB.NET]

txtLongText.Attributes.Add("onkeydown", _
"if(event.which || event.keyCode){if ((event.which == 9)" & _ 
"|| (event.keyCode == 9)) {document.getElementById('" & _ 
txtLongText.ClientID + "').selection = " & _
document.selection.createRange();" & _ 
txtLongText.ClientID & ".selection.text = " & _
" String.fromCharCode(9);return false;}} else {return true}; ")

[C #]

txtLongText.Attributes.Add("onkeydown", 
"if(event.which || event.keyCode){if ((event.which == 9)" +
"|| (event.keyCode == 9)) {document.getElementById('"+
txtLongText.ClientID + "').selection = document.selection.createRange();" + 
txtLongText.ClientID + ".selection.text = String.fromCharCode(9);return false;}} else {return true}; ");

Atau lebih baik, untuk menghindari pengkodean yang sulit, Anda dapat memasukkan kode ini ke dalam suatu fungsi bernama EnableTabType. Fungsi hanya memiliki satu parameter, yang menentukan apa yang TextBoxmengontrol di mana Anda perlu mengaktifkan pengetikan karakter Tab.

[VB.NET]

Public Sub EnableTabType(tb As TextBox)
    tb.Attributes.Add("onkeydown", _
    "if(event.which || event.keyCode){if((event.which == 9)" & _ 
    "|| (event.keyCode == 9)) {document.getElementById('" & _ 
    tb.ClientID & "').selection=document.selection.createRange();" & _
    tb.ClientID & ".selection.text = " & _
    " String.fromCharCode(9);return false;}}else{return true};")
End Sub 

[C #]

public void EnableTabType(TextBox tb)
{ 
    tb.Attributes.Add("onkeydown", 
    "if(event.which || event.keyCode){if ((event.which == 9)" +
    "|| (event.keyCode == 9)) {document.getElementById('"+
    tb.ClientID + "').selection = document.selection.createRange();" +
    tb.ClientID + ".selection.text = String.fromCharCode(9);return false;}} else {return true}; ");
}

Sumber: http://www.beansoftware.com/ASP.NET-Tutorials/Access-Tab-Key.aspx

admintech
sumber
0

atau menggunakan ahk untuk memasukkan ruang 4 * di editor:

^Right::
tabspace:="    "
send,%tabspace%    
return 

Anda dapat melihat penjelasan detail kode dalam kode ahk

Lu Zhao
sumber