Użyj tabulatora, aby wciąć tekst w obszarze tekstu

Mam po swojej stronie prosty tekst w html. W tej chwili, jeśli klikniesz w nią kartę, przejdzie do następnego pola. Chciałbym zamiast tego, aby przycisk tabulatora wciskał kilka spacji. W jaki sposób mogę to zrobić? Dzięki.

Pożyczanie w dużym stopniu innych odpowiedzi na podobne pytania (zamieszczone poniżej) ...

$(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: Jak przechwycić naciśnięcie klawisza TAB w polu tekstowym

Jak obsłużyć <tab> w obszarze tekstowym?

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

To rozwiązanie nie wymaga jQuery i zapewni funkcjonalność zakładek we wszystkich obszarach tekstowych na stronie.

Jak napisali inni, możesz użyć JavaScript do przechwycenia zdarzenia, zablokowania domyślnej akcji (aby kursor nie zmienił ostrości) i wstawienia znaku tabulacji.

Jednak wyłączenie domyślnego zachowania uniemożliwia przeniesienie fokusu poza obszar tekstowy bez użycia myszy. Niewidomi użytkownicy wchodzą w interakcję ze stronami internetowymi za pomocą klawiatury i nic więcej - nie widzą wskaźnika myszy, aby zrobić z nim cokolwiek użytecznego, więc jest to klawiatura lub nic innego. Klawisz tabulatora to podstawowy sposób poruszania się po dokumencie, a zwłaszcza po formularzach. Zastępowanie domyślnego zachowania klawisza tabulatora uniemożliwi niewidomym użytkownikom przeniesienie fokusu do następnego elementu formularza.

Tak więc, jeśli piszesz witrynę internetową dla szerokiego grona odbiorców, odradzam robienie tego bez ważnego powodu i zapewniam jakąś alternatywę dla niewidomych użytkowników, która nie uwięzi ich w obszarze tekstowym.

Oto mój oneliner, o czym wszyscy mówiliście w tym wątku:

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

Testuj w najnowszych wersjach przeglądarek Chrome, Firefox, Internet Explorer i Edge.

Oto moja wersja tego, obsługuje:

• Tab + Shift Tab
• utrzymuje stos cofania dla prostego wstawiania znaków tabulacji
• obsługuje wcięcie / cofanie wcięcia linii, ale kasuje cofanie stosu
• prawidłowo zaznacza całe wiersze, gdy wcięcie / cofnięcie wcięcia bloku
• obsługuje automatyczne wcięcie po naciśnięciu klawisza Enter (utrzymuje stos cofania)
• użyj klawisza Escape anuluj obsługę na następnej karcie / klawisz Enter (abyś mógł nacisnąć klawisz Escape, a następnie tabulator)
• Działa na Chrome + Edge, inne niesprawdzone.

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

Nowoczesny sposób, który oba są proste i nie tracą możliwości cofnięcia (Ctrl + Z) ostatnich zmian.

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

Więcej o execCommand:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

Edytować:

Jak wskazano w komentarzu (i chociaż było to kiedyś „nowoczesne” rozwiązanie ), funkcja stała się przestarzała. Cytując dokumenty:

Ta funkcja jest przestarzała. Chociaż może nadal działać w niektórych przeglądarkach, odradza się jego używanie, ponieważ można go usunąć w dowolnym momencie. Staraj się go unikać.

Szybko nie osiągnąłem niczego, próbując użyć odpowiedzi @ kasdega w środowisku AngularJS, nic, co próbowałem, nie było w stanie zmusić Angulara do działania na zmianę. Więc na wypadek, gdyby było to przydatne dla przechodniów, oto przepisanie kodu @ kasdega w stylu AngularJS, który zadziałał dla mnie:

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

i:

<textarea ng-model="mytext" ng-allow-tab></textarea>

Musisz napisać kod JS, aby złapać naciśnięcie klawisza TAB i wstawić kilka spacji. Coś podobnego do tego, co robi JSFiddle.

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

Skrypt wielowierszowy oparty na rozwiązaniu @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;
    }
});

To rozwiązanie umożliwia tabulatorowanie całego zaznaczenia, tak jak w typowym edytorze kodu, a także usuwanie tego zaznaczenia. Jednak nie wymyśliłem, jak zaimplementować shift-tab, gdy nie ma wyboru.

$('#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>

W oparciu o wszystko, co ludzie mieli tutaj do powiedzenia na temat odpowiedzi, jest to po prostu kombinacja keydown (nie keyup) + PreventDefault () + wstawia znak tabulacji na daszku. Coś jak:

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

Wcześniejsza odpowiedź miała działający plik jsfiddle, ale używała alert () w keydown. Jeśli usuniesz ten alert, to nie zadziałało. Właśnie dodałem funkcję wstawiania tabulatora w bieżącej pozycji kursora w obszarze tekstu.

Oto działający jsfiddle dla tego samego: http://jsfiddle.net/nsHGZ/

Widzę, że ten temat nie został rozwiązany. Zakodowałem to i działa bardzo dobrze. Wstawia tabulację w indeksie kursora. Bez używania 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>

Przytrzymaj ALT i naciśnij 0,9 na klawiaturze numerycznej. Działa w Google Chrome

Stworzyłem taki, do którego możesz uzyskać dostęp za pomocą dowolnego elementu textarea, który lubisz:

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

A element wyglądałby tak:

<textarea onkeydown="textControl(this,event)"></textarea>

Najprostszym sposobem znalazłem to zrobić w nowoczesnych przeglądarkach z wanilii JavaScript jest:

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

Zauważ, że użyłem wielu funkcji ES6 w tym fragmencie ze względu na prostotę, prawdopodobnie będziesz chciał przetransponować go (za pomocą Babel lub TypeScript) przed wdrożeniem.

Powyższe odpowiedzi na wszystkie wipe undo history. Dla każdego, kto szuka rozwiązania, które tego nie robi, ostatnią godzinę spędziłem na kodowaniu dla 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);
    });
};

Krótko mówiąc, zakładki są wstawiane na początku wybranych wierszy.

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

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

Przykładowe użycie: $('textarea').enableTabs('\t')

Wady: działa tylko w Chrome, jak jest.

Na Github znajduje się biblioteka do obsługi kart w obszarach tekstowych autorstwa wjbryant: Tab Override

Tak to działa:

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

// enable Tab Override for all textareas
tabOverride.set(textareas);

Jako opcję powyższego kodu kasdega, zamiast dołączania tabulatora do bieżącej wartości, możesz zamiast tego wstawiać znaki w bieżącym punkcie kursora. Ma to tę zaletę, że:

• umożliwia wstawienie 4 spacji jako alternatywy dla tabulatora
• cofnij i ponów będzie działać z wstawionymi znakami (nie będzie z OP)

więc wymień

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

z

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

Wypróbuj tę prostą funkcję jQuery:

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

Musiałem zrobić funkcję, aby zrobić to samo, jest prosta w użyciu, po prostu skopiuj ten kod do swojego skryptu i użyj: enableTab( HTMLElement )HTMLelement będący czymś w rodzajudocument.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}}}

Każde wejście elementu textarea ma zdarzenie onkeydown. W module obsługi zdarzeń możesz zapobiec domyślnej reakcji klawisza tabulatora, używając zdarzenia event.preventDefault (), gdy event.keyCode ma wartość 9.

Następnie umieść znak tabulatora we właściwej pozycji:

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

Prosty samodzielny skrypt:

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

Jeśli naprawdę potrzebujesz zakładek, skopiuj kartę ze słowa lub notatnika i wklej ją w polu tekstowym, w którym chcesz

1 2 3

12 22 33,

Niestety myślę, że usunęli zakładki z tych komentarzy :) Będzie on wyświetlany jako% 09 w Twoim POST lub GET