Gunakan tab untuk indentasi dalam textarea

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.

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/

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.

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.

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.

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>

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:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/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.

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>

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');
  } 
});
​

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

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>

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/

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>

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

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>

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.

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.

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

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, '    ');

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

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

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 )

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

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>

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

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

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