Gunakan tab untuk indentasi dalam textarea

143

Saya memiliki textarea html sederhana di sisi saya. Sekarang jika Anda mengklik tab di dalamnya, ia pergi ke bidang berikutnya. Saya ingin membuat tombol tab indentasi beberapa spasi sebagai gantinya. Bagaimana saya bisa melakukan ini? Terima kasih.

pengguna780483
sumber
Ini bisa dilakukan dengan JavaScript, dan hampir mudah menggunakan perpustakaan JS. Apakah Anda dapat menggunakan salah satu opsi itu?
David mengatakan mengembalikan Monica
apa lingkunganmu Javascript, Jquery, sesuatu yang lain?
kasdega
@david Saya bisa menggunakan yang mana saja
user780483
Saya akan menggunakan jquery dengan kombinasi .focus () dan .keydown ()
kasdega
8
kemungkinan duplikat dari Bagaimana menangani <tab> di textarea?
Caspar Kleijne

Jawaban:

120

Meminjam banyak dari jawaban lain untuk pertanyaan serupa (diposting di bawah) ...

$(document).delegate('#textbox', 'keydown', function(e) {
  var keyCode = e.keyCode || e.which;

  if (keyCode == 9) {
    e.preventDefault();
    var start = this.selectionStart;
    var end = this.selectionEnd;

    // set textarea value to: text before caret + tab + text after caret
    $(this).val($(this).val().substring(0, start)
                + "\t"
                + $(this).val().substring(end));

    // put caret at right position again
    this.selectionStart =
    this.selectionEnd = start + 1;
  }
});

jQuery: Cara menangkap penekanan tombol TAB dalam kotak teks

Bagaimana cara menangani <tab> di textarea?

http://jsfiddle.net/jz6J5/

kasdega
sumber
13
"$ (this) .get (0) .selectionStart". Gunakan saja "this.selectionStart"
Bohdan Yurov
Bisakah Anda membuat ini berfungsi dengan 4 spasi, bukan \ t? Jika Anda mengganti dengan "" itu akan memasukkan spasi tetapi meninggalkan tanda sisipan.
Sinaesthetic
@Sinesthetic - balasan terlambat, tetapi untuk memindahkan tanda sisipan, sesuaikan baris terakhir menjadi 'start + 4' bukannya 'start + 1'
nevada_scout
4
Saya biasanya tidak menyalin kode langsung dari Stackoverflow dan menempelkannya ke proyek saya dan membuatnya berfungsi, tetapi ketika saya melakukannya, itu adalah kode ini. Terima kasih untuk ini.
Flat Cat
10
Ini merusak fitur undo browser (Ctrl + z).
01AutoMonkey
54
var textareas = document.getElementsByTagName('textarea');
var count = textareas.length;
for(var i=0;i<count;i++){
    textareas[i].onkeydown = function(e){
        if(e.keyCode==9 || e.which==9){
            e.preventDefault();
            var s = this.selectionStart;
            this.value = this.value.substring(0,this.selectionStart) + "\t" + this.value.substring(this.selectionEnd);
            this.selectionEnd = s+1; 
        }
    }
}

Solusi ini tidak memerlukan jQuery dan akan mengaktifkan fungsionalitas tab pada semua teks pada halaman.

pengguna1949974
sumber
Bisakah Anda membuat ini berfungsi dengan 4 spasi, bukan \ t? Jika Anda mengganti dengan "" itu akan memasukkan spasi tetapi meninggalkan tanda sisipan.
Sinaesthetic
1
@Sestetika: ya, Anda dapat mengubah tab menjadi spasi, tetapi Anda harus menyesuaikan sedikit kode (ada 3-4 huruf baru alih-alih satu). Alternatif lainnya adalah ukuran tab CSS.
Adrian Maire
@Sestetika Ya, ganti saja baris terakhir this.selectionEnd = s+1;dengan this.selectionEnd = s + "\t".length;. Akan lebih bersih untuk menggunakan variabel atau parameter fungsi dan menyimpan karakter indentasi di sana. Tapi Anda tahu apa yang harus diganti sekarang: +1Menentukan berapa banyak karakter yang dipindahkan.
StanE
2
KeyboardEvent.keyCodedan KeyboardEvent.whichproperti yang sudah usang. Gunakan KeyboardEvent.keysebagai gantinya.
Константин Ван
48

Seperti yang ditulis orang lain, Anda dapat menggunakan JavaScript untuk menangkap acara, mencegah tindakan default (sehingga kursor tidak menggeser fokus) dan menyisipkan karakter tab.

Tapi , menonaktifkan perilaku default membuatnya tidak mungkin untuk memindahkan fokus keluar dari area teks tanpa menggunakan mouse. Pengguna buta berinteraksi dengan halaman web menggunakan keyboard dan tidak ada yang lain - mereka tidak dapat melihat pointer mouse untuk melakukan sesuatu yang berguna dengannya, jadi itu keyboard atau tidak sama sekali. Tombol tab adalah cara utama untuk menavigasi dokumen, dan terutama formulir. Mengganti perilaku default tombol tab akan membuat mustahil bagi pengguna tunanetra untuk memindahkan fokus ke elemen formulir berikutnya.

Jadi, jika Anda menulis situs web untuk khalayak luas, saya akan merekomendasikan untuk tidak melakukan ini tanpa alasan yang meyakinkan , dan memberikan semacam alternatif bagi pengguna tunanetra yang tidak menjebak mereka di dalam textarea.

Will Martin
sumber
2
Terima kasih. Saya tidak bermaksud terdengar kasar, tetapi saya tidak tahu orang buta menggunakan komputer. Saya akan mengingat hal ini
user780483
10
Tidak apa-apa, banyak orang tidak tahu; itu di luar pengalaman mereka. Berikut pengantar: webaim.org/intro
Will Martin
Ya ide yang sangat buruk jika ini adalah situs web untuk khalayak umum. Selain pengguna pembaca layar, ada banyak pengguna lain yang karena berbagai alasan harus, atau memilih untuk, menavigasi dengan keyboard. Menjebak tombol tab akan membuat formulir setidaknya mengganggu dan sangat mungkin tidak dapat digunakan untuk pengguna ini.
steveax
6
Mungkin menggunakan control + tab. Ini akan mempertinggi kemampuan browser ke tab lain (halaman web), tetapi pengguna bisa saja tab keluar dari kotak teks dan kemudian mengontrol tab ke halaman lain. Seharusnya ada petunjuk di halaman menggunakan tab ctrl + untuk tab.
Joseph McIntyre
Terima kasih @WillMartin Sepotong informasi yang sangat berharga. Saya akan menerapkan hal yang sama di seluruh blog saya untuk semua textarea tanpa mempertimbangkan hal yang sangat penting ini.
Imran
40

Untuk apa nilainya, inilah oneliner saya, untuk apa yang Anda semua bicarakan di utas ini:

<textarea onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}">
</textarea>

Uji dalam edisi terbaru Chrome, Firefox, Internet Explorer dan Edge.

elgholm
sumber
Tuan, luar biasa.
NiCk Newman
1
Bagaimana saya bisa memodifikasi kode ini untuk menggunakan 4 spasi alih-alih tab? Saya mencoba melakukan & nbsp; empat kali tetapi masih mengubahnya menjadi satu ruang.
jiaweizhang
5
NiCk, tolong beri tahu istri saya. jiaweizhang, ganti '\ t' dengan '<4 spasi>' dan 1 dengan 4.
elgholm
1
Jawaban terbaik!
Marco Demaio
1
Sangat rapi, ini kebalikannya melalui SHIFT:if(event.shiftKey){if(v.substring(s-1,s)==='\t'){this.value=v.substring(0,s-1)+v.substring(e);this.selectionStart=this.selectionEnd=s-1;}}
DonFuchs
12

Inilah versi saya ini, mendukung:

  • tab + tab shift
  • memelihara undo stack untuk menyisipkan karakter tab sederhana
  • mendukung indentasi baris blok / tidak-indentasi tetapi trash undo stack
  • dengan benar memilih seluruh baris ketika memblokir indent / unindent
  • mendukung indentasi otomatis pada menekan enter (memelihara undo stack)
  • gunakan tombol Escape untuk membatalkan dukungan pada tab berikutnya / masukkan kunci (sehingga Anda dapat menekan Escape kemudian tab keluar)
  • Bekerja di Chrome + Edge, orang lain yang belum diuji.

$(function() { 
	var enabled = true;
	$("textarea.tabSupport").keydown(function(e) {

		// Escape key toggles tab on/off
		if (e.keyCode==27)
		{
			enabled = !enabled;
			return false;
		}

		// Enter Key?
		if (e.keyCode === 13 && enabled)
		{
			// selection?
			if (this.selectionStart == this.selectionEnd)
			{
				// find start of the current line
				var sel = this.selectionStart;
				var text = $(this).val();
				while (sel > 0 && text[sel-1] != '\n')
				sel--;

				var lineStart = sel;
				while (text[sel] == ' ' || text[sel]=='\t')
				sel++;

				if (sel > lineStart)
				{
					// Insert carriage return and indented text
					document.execCommand('insertText', false, "\n" + text.substr(lineStart, sel-lineStart));

					// Scroll caret visible
					this.blur();
					this.focus();
					return false;
				}
			}
		}

		// Tab key?
		if(e.keyCode === 9 && enabled) 
		{
			// selection?
			if (this.selectionStart == this.selectionEnd)
			{
				// These single character operations are undoable
				if (!e.shiftKey)
				{
					document.execCommand('insertText', false, "\t");
				}
				else
				{
					var text = this.value;
					if (this.selectionStart > 0 && text[this.selectionStart-1]=='\t')
					{
						document.execCommand('delete');
					}
				}
			}
			else
			{
				// Block indent/unindent trashes undo stack.
				// Select whole lines
				var selStart = this.selectionStart;
				var selEnd = this.selectionEnd;
				var text = $(this).val();
				while (selStart > 0 && text[selStart-1] != '\n')
					selStart--;
				while (selEnd > 0 && text[selEnd-1]!='\n' && selEnd < text.length)
					selEnd++;

				// Get selected text
				var lines = text.substr(selStart, selEnd - selStart).split('\n');

				// Insert tabs
				for (var i=0; i<lines.length; i++)
				{
					// Don't indent last line if cursor at start of line
					if (i==lines.length-1 && lines[i].length==0)
						continue;

					// Tab or Shift+Tab?
					if (e.shiftKey)
					{
						if (lines[i].startsWith('\t'))
							lines[i] = lines[i].substr(1);
						else if (lines[i].startsWith("    "))
							lines[i] = lines[i].substr(4);
					}
					else
						lines[i] = "\t" + lines[i];
				}
				lines = lines.join('\n');

				// Update the text area
				this.value = text.substr(0, selStart) + lines + text.substr(selEnd);
				this.selectionStart = selStart;
				this.selectionEnd = selStart + lines.length; 
			}

			return false;
		}

		enabled = true;
		return true;
	});
});
textarea
{
  width: 100%;
  height: 100px;
  tab-size: 4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="tabSupport">if (something)
{
	// This textarea has "tabSupport" CSS style
	// Try using tab key
	// Try selecting multiple lines and using tab and shift+tab
	// Try pressing enter at end of this line for auto indent
	// Use Escape key to toggle tab support on/off
	//     eg: press Escape then Tab to go to next field
}
</textarea>
<textarea>This text area doesn't have tabSupport class so disabled here</textarea>

Brad Robinson
sumber
1
Ini jawaban terbaik di sini.
FourCinnamon0
Ini berfungsi tanpa jQuery dengan sedikit pekerjaan. Periksa youmightnotneedjquery.com untuk bantuan. Jelas jawaban terbaik di sini juga.
Jamon Holmgren
10

Cara modern yang keduanya lurus ke depan dan tidak kehilangan kemampuan untuk membatalkan (Ctrl + Z) perubahan terakhir.

$('#your-textarea').keydown(function (e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode === $.ui.keyCode.TAB) {
        e.preventDefault();

        const TAB_SIZE = 4;

        // The one-liner that does the magic
        document.execCommand('insertText', false, ' '.repeat(TAB_SIZE));
    }
});

Lebih lanjut tentang execCommand:


Edit:

Seperti yang ditunjukkan dalam komentar (dan meskipun ini dulunya solusi "modern" ), fitur tersebut sudah usang. Mengutip dokumen:

Fitur ini sudah usang. Meskipun masih dapat berfungsi di beberapa browser, penggunaannya tidak disarankan karena dapat dihapus kapan saja. Cobalah untuk menghindari menggunakannya.

Yom S.
sumber
3
Ini adalah satu-satunya jawaban yang benar pada saat ini. Terima kasih banyak 🙏
Chris Calo
2
Sayangnya tidak ada dukungan Firefox. Coba indent-textareauntuk solusi lintas-browser yang menggunakan metode ini + mundur di Firefox.
fregante
Di Firefox, document.execCommandhanya menjadi diaktifkan setelah pengaturan document.designMode = "on";. Saya bisa mendapatkan teks untuk ditulis menjadi elemen yang ada .contentEditable = 'true'. Namun, ketika saya mencoba menyelesaikan ini di textarea, textNode yang dimasukkan ditempatkan tepat sebelum textarea di dalam dokumen (bukan ke dalam textarea). Tolong coba untuk membantu Mozilla menemukan ini di sini .
Lonnie Best
Ketahuilah, ini tidak lagi dianggap 'modern', halaman yang Anda tautkan catatan (tentang execCommand): 'Fitur ini sudah usang. Meskipun masih dapat berfungsi di beberapa browser, penggunaannya tidak disarankan karena dapat dihapus kapan saja. Cobalah untuk menghindari menggunakannya. '
kasimir
9

Saya semakin cepat mencoba menggunakan jawaban @ kasdega di lingkungan AngularJS, tidak ada yang saya coba tampaknya mampu membuat Angular bertindak atas perubahan tersebut. Jadi seandainya ada gunanya bagi orang yang lewat, inilah penulisan ulang kode @ kasdega, gaya AngularJS, yang bekerja untuk saya:

app.directive('ngAllowTab', function () {
    return function (scope, element, attrs) {
        element.bind('keydown', function (event) {
            if (event.which == 9) {
                event.preventDefault();
                var start = this.selectionStart;
                var end = this.selectionEnd;
                element.val(element.val().substring(0, start) 
                    + '\t' + element.val().substring(end));
                this.selectionStart = this.selectionEnd = start + 1;
                element.triggerHandler('change');
            }
        });
    };
});

dan:

<textarea ng-model="mytext" ng-allow-tab></textarea>
stovroz
sumber
Sangat penting untuk memanggil element.triggerHandler('change');, jika model tidak akan diperbarui (karena element.triggerHandler('change');saya pikir.
Alvaro Flaño Larrondo
6

Anda harus menulis kode JS untuk menangkap tombol TAB, tekan dan masukkan banyak spasi. Sesuatu yang mirip dengan apa yang dilakukan JSFiddle.

Periksa biola jquery :

HTML :

<textarea id="mybox">this is a test</textarea>

JavaScript :

$('#mybox').live('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    alert('tab pressed');
  } 
});
Aziz Shaikh
sumber
2
Jangan lupa untuk mencegah tindakan default juga. event.preventDefault();
Ryan
2
Live telah diganti dengan di dalam versi yang lebih baru.
Eric Harms
Properti event.which menormalkan event.keyCode dan event.charCode . Anda tidak perlu memeriksa e.keyCode || e.which.
Trevor
6

Skrip indetasi multi-baris berdasarkan pada solusi @kasdega.

$('textarea').on('keydown', function (e) {
    var keyCode = e.keyCode || e.which;

    if (keyCode === 9) {
        e.preventDefault();
        var start = this.selectionStart;
        var end = this.selectionEnd;
        var val = this.value;
        var selected = val.substring(start, end);
        var re = /^/gm;
        var count = selected.match(re).length;


        this.value = val.substring(0, start) + selected.replace(re, '\t') + val.substring(end);
        this.selectionStart = start;
        this.selectionEnd = end + count;
    }
});
Martin
sumber
1
Solusi terbaik sejauh ini, tetapi mungkin seharusnya tidak membuat pilihan kapan start === end.
buka
6

Solusi ini memungkinkan tabbing dalam seluruh pilihan seperti editor kode khas Anda, dan menghapus centang pilihan itu juga. Namun, saya belum menemukan cara mengimplementasikan shift-tab ketika tidak ada pilihan.

$('#txtInput').on('keydown', function(ev) {
    var keyCode = ev.keyCode || ev.which;

    if (keyCode == 9) {
        ev.preventDefault();
        var start = this.selectionStart;
        var end = this.selectionEnd;
        var val = this.value;
        var selected = val.substring(start, end);
        var re, count;

        if(ev.shiftKey) {
            re = /^\t/gm;
            count = -selected.match(re).length;
            this.value = val.substring(0, start) + selected.replace(re, '') + val.substring(end);
            // todo: add support for shift-tabbing without a selection
        } else {
            re = /^/gm;
            count = selected.match(re).length;
            this.value = val.substring(0, start) + selected.replace(re, '\t') + val.substring(end);
        }

        if(start === end) {
            this.selectionStart = end + count;
        } else {
            this.selectionStart = start;
        }

        this.selectionEnd = end + count;
    }
});
#txtInput {
  font-family: monospace;
  width: 100%;
  box-sizing: border-box;
  height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<textarea id="txtInput">
$(document).ready(function(){
	$("#msgid").html("This is Hello World by JQuery");
});
</textarea>

Mpen
sumber
Ini berfungsi baik, tetapi Anda setidaknya bisa membatasi tab-shift tanpa ada pilihan dari kesalahan melempar. Saya melakukannya dengan if (selected.length > 0) {...}Fiddle sederhana : jsfiddle.net/jwfkbjkr
3

Berdasarkan semua yang orang katakan di sini pada jawaban, itu hanya kombinasi dari keydown (bukan keyup) + preventDefault () + masukkan karakter tab di tanda sisipan. Sesuatu seperti:

var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
   e.preventDefault();
   insertAtCaret('txt', '\t')
}

Jawaban sebelumnya memiliki jsfiddle yang berfungsi tetapi menggunakan tanda () pada keydown. Jika Anda menghapus lansiran ini, maka itu tidak berhasil. Saya baru saja menambahkan fungsi untuk menyisipkan tab pada posisi kursor saat ini di textarea.

Berikut adalah jsfiddle yang berfungsi untuk hal yang sama: http://jsfiddle.net/nsHGZ/

walmik
sumber
3

Saya melihat masalah ini tidak terpecahkan. Saya mengkodekan ini dan itu bekerja dengan sangat baik. Ini memasukkan tabulasi pada indeks kursor. Tanpa menggunakan jquery

<textarea id="myArea"></textarea>
<script>
document.getElementById("myArea").addEventListener("keydown",function(event){
    if(event.code==="Tab"){
        var cIndex=this.selectionStart;
        this.value=[this.value.slice(0,cIndex),//Slice at cursor index
            "\t",                              //Add Tab
            this.value.slice(cIndex)].join('');//Join with the end
        event.stopPropagation();
        event.preventDefault();                //Don't quit the area
        this.selectionStart=cIndex+1;
        this.selectionEnd=cIndex+1;            //Keep the cursor in the right index
    }
});
</script>
Bibimission
sumber
2
Kode ini mengacaukan tumpukan undo. Setelah menggunakan menyisipkan tab, terkadang Anda tidak dapat membatalkan apa pun atau hanya 1-2 langkah ke belakang.
Magnus Eriksson
2

Tahan ALT dan tekan 0,9 dari keypad numerik. Ini bekerja di google-chrome

krishna
sumber
2

Saya membuat satu yang dapat Anda akses dengan elemen textarea yang Anda suka:

function textControl (element, event)
{
    if(event.keyCode==9 || event.which==9)
    {
        event.preventDefault();
        var s = element.selectionStart;
        element.value = element.value.substring(0,element.selectionStart) + "\t" + element.value.substring(element.selectionEnd);
        element.selectionEnd = s+1; 
    }
}

Dan elemennya akan terlihat seperti ini:

<textarea onkeydown="textControl(this,event)"></textarea>
Hellena Bailey
sumber
2

Cara paling sederhana yang saya temukan untuk melakukannya di browser modern dengan vanilla JavaScript adalah:

  <textarea name="codebox"></textarea>
  
  <script>
  const codebox = document.querySelector("[name=codebox]")

  codebox.addEventListener("keydown", (e) => {
    let { keyCode } = e;
    let { value, selectionStart, selectionEnd } = codebox;

    if (keyCode === 9) {  // TAB = 9
      e.preventDefault();

      codebox.value = value.slice(0, selectionStart) + "\t" + value.slice(selectionEnd);

      codebox.setSelectionRange(selectionStart+2, selectionStart+2)
    }
  });
  </script>

Perhatikan bahwa saya menggunakan banyak fitur ES6 dalam cuplikan ini demi kesederhanaan, Anda mungkin ingin mengubahnya (dengan Babel atau TypeScript) sebelum menggunakannya.

Telmo Trooper
sumber
1

Jawaban di atas semua menghapus riwayat. Bagi siapa pun yang mencari solusi yang tidak melakukan itu, saya menghabiskan satu jam terakhir membuat kode berikut untuk Chrome:

jQuery.fn.enableTabs = function(TAB_TEXT){
    // options
    if(!TAB_TEXT)TAB_TEXT = '\t';
    // text input event for character insertion
    function insertText(el, text){
        var te = document.createEvent('TextEvent');
        te.initTextEvent('textInput', true, true, null, text, 9, "en-US");
        el.dispatchEvent(te);
    }
    // catch tab and filter selection
    jQuery(this).keydown(function(e){
        if((e.which || e.keyCode)!=9)return true;
        e.preventDefault();
        var contents = this.value,
            sel_start = this.selectionStart,
            sel_end = this.selectionEnd,
            sel_contents_before = contents.substring(0, sel_start),
            first_line_start_search = sel_contents_before.lastIndexOf('\n'),
            first_line_start = first_line_start_search==-1 ? 0 : first_line_start_search+1,
            tab_sel_contents = contents.substring(first_line_start, sel_end),
            tab_sel_contents_find = (e.shiftKey?new RegExp('\n'+TAB_TEXT, 'g'):new RegExp('\n', 'g')),
            tab_sel_contents_replace = (e.shiftKey?'\n':'\n'+TAB_TEXT);
            tab_sel_contents_replaced = (('\n'+tab_sel_contents)
                .replace(tab_sel_contents_find, tab_sel_contents_replace))
                .substring(1),
            sel_end_new = first_line_start+tab_sel_contents_replaced.length;
        this.setSelectionRange(first_line_start, sel_end);
        insertText(this, tab_sel_contents_replaced);
        this.setSelectionRange(first_line_start, sel_end_new);
    });
};

Singkatnya, tab dimasukkan di awal garis yang dipilih.

JSFiddle: http://jsfiddle.net/iausallc/5Lnabspr/11/

Intisari: https://gist.github.com/iautomation/e53647be326cb7d7112d

Contoh penggunaan: $('textarea').enableTabs('\t')

Cons: Hanya berfungsi di Chrome apa adanya.

iautomation
sumber
Bagian mana dari skrip ini yang hanya berfungsi di Chrome? Apakah itu "TextEvent"? help.dottoro.com/lagstsiq.php/#TextEvent Situs ini mengatakan itu juga bisa berfungsi di IE9 + dan Safari. Karena saya membutuhkan ini untuk Aplikasi Chrome, ini sempurna.
Andreas Linnert
@ Andreas Linnert Anda benar. Ini didokumentasikan untuk berfungsi di IE dan Safari. Namun, pada saat penulisan ini, IE tidak berfungsi untuk saya, dan saya tidak punya waktu untuk memeriksanya lebih lanjut, dan saya belum mengujinya di Safari. Permintaan maaf untuk kebingungan. Saya senang telah membantu.
iautomation
0

Ada perpustakaan di Github untuk dukungan tab di area teks Anda oleh wjbryant: Tab Override

Begini Cara kerjanya:

// get all the textarea elements on the page
var textareas = document.getElementsByTagName('textarea');

// enable Tab Override for all textareas
tabOverride.set(textareas);
Pho3nixHun
sumber
Bukan jawaban yang buruk, tetapi melihat kode itu menggunakan teknik yang hampir sama dengan yang dijelaskan dalam beberapa jawaban di sini: github.com/wjbryant/taboverride/blob/master/src/… . Ini berarti bahwa itu tidak mempertahankan sejarah undo, yang merupakan masalah utama.
mihai
0

Sebagai opsi untuk kode kasdega di atas, alih-alih menambahkan tab ke nilai saat ini, Anda dapat memasukkan karakter pada titik kursor saat ini. Ini memiliki manfaat:

  • memungkinkan Anda untuk memasukkan 4 spasi sebagai alternatif untuk tab
  • batalkan dan ulang akan bekerja dengan karakter yang disisipkan (tidak akan dengan OP)

jadi gantikan

    // set textarea value to: text before caret + tab + text after caret
    $(this).val($(this).val().substring(0, start)
                + "\t"
                + $(this).val().substring(end));

dengan

    // set textarea value to: text before caret + tab + text after caret
    document.execCommand("insertText", false, '    ');
dyg
sumber
-1
if (e.which == 9) {
    e.preventDefault();
    var start = $(this).get(0).selectionStart;
    var end = $(this).get(0).selectionEnd;

    if (start === end) {
        $(this).val($(this).val().substring(0, start)
                    + "\t"
                    + $(this).val().substring(end));
        $(this).get(0).selectionStart =
        $(this).get(0).selectionEnd = start + 1;
    } else {
        var sel = $(this).val().substring(start, end),
            find = /\n/g,
            count = sel.match(find) ? sel.match(find).length : 0;
        $(this).val($(this).val().substring(0, start)
                    + "\t"
                    + sel.replace(find, "\n\t")
                    + $(this).val().substring(end, $(this).val().length));
        $(this).get(0).selectionStart =
        $(this).get(0).selectionEnd = end+count+1;
    }
}
Razorxan
sumber
-1

Coba fungsi jQuery sederhana ini:

$.fn.getTab = function () {
    this.keydown(function (e) {
        if (e.keyCode === 9) {
            var val = this.value,
                start = this.selectionStart,
                end = this.selectionEnd;
            this.value = val.substring(0, start) + '\t' + val.substring(end);
            this.selectionStart = this.selectionEnd = start + 1;
            return false;
        }
        return true;
    });
    return this;
};

$("textarea").getTab();
// You can also use $("input").getTab();

sumber
-1

Saya harus membuat fungsi untuk melakukan hal yang sama, Mudah digunakan, cukup salin kode ini ke skrip Anda dan gunakan: enableTab( HTMLElement )HTML elemen menjadi sesuatu sepertidocument.getElementById( id )


Kode tersebut adalah:

function enableTab(t){t.onkeydown=function(t){if(9===t.keyCode){var e=this.value,n=this.selectionStart,i=this.selectionEnd;return this.value=e.substring(0,n)+" "+e.substring(i),this.selectionStart=this.selectionEnd=n+1,!1}}}
Dendromaniac
sumber
-1

Setiap input elemen textarea memiliki acara onkeydown. Dalam pengendali event, Anda dapat mencegah reaksi default tombol tab dengan menggunakan event.preventDefault () setiap kali event.keyCode adalah 9.

Kemudian letakkan tanda tab di posisi yang benar:

function allowTab(input)
{
    input.addEventListener("keydown", function(event)
    {
        if(event.keyCode == 9)
        {
            event.preventDefault();

            var input = event.target;

            var str = input.value;
            var _selectionStart = input.selectionStart;
            var _selectionEnd = input.selectionEnd;

            str = str.substring(0, _selectionStart) + "\t" + str.substring(_selectionEnd, str.length);
            _selectionStart++;

            input.value = str;
            input.selectionStart = _selectionStart;
            input.selectionEnd = _selectionStart;
        }
    });
}

window.addEventListener("load", function(event)
{
    allowTab(document.querySelector("textarea"));
});

html

<textarea></textarea>
Martin Wantke
sumber
-1
$("textarea").keydown(function(event) {
    if(event.which===9){
        var cIndex=this.selectionStart;
        this.value=[this.value.slice(0,cIndex),//Slice at cursor index
            "\t",                              //Add Tab
            this.value.slice(cIndex)].join('');//Join with the end
        event.stopPropagation();
        event.preventDefault();                //Don't quit the area
        this.selectionStart=cIndex+1;
        this.selectionEnd=cIndex+1;            //Keep the cursor in the right index
    }
});
Konstantin XFlash Stratigenas
sumber
-1

Skrip mandiri sederhana:

textarea_enable_tab_indent = function(textarea) {    
    textarea.onkeydown = function(e) {
        if (e.keyCode == 9 || e.which == 9){
            e.preventDefault();
            var oldStart = this.selectionStart;
            var before   = this.value.substring(0, this.selectionStart);
            var selected = this.value.substring(this.selectionStart, this.selectionEnd);
            var after    = this.value.substring(this.selectionEnd);
            this.value = before + "    " + selected + after;
            this.selectionEnd = oldStart + 4;
        }
    }
}
lama12345
sumber
-3

Jika Anda benar-benar membutuhkan tab, salin tab dari kata atau notepad dan tempel di kotak teks di mana Anda menginginkannya

1 2 3

12 22 33

Sayangnya saya pikir mereka menghapus tab dari komentar ini :) Akan ditampilkan sebagai% 09 di POST atau GET Anda

pengguna4686585
sumber
2
Saya pikir ini jawaban, meskipun jawaban yang sangat buruk. Ini menyarankan pendekatan alternatif, yaitu memberikan solusi bagi pengguna akhir.
GS - Minta maaf kepada Monica