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


143

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.


Jest to możliwe za pomocą JavaScript i prawie łatwe przy użyciu biblioteki JS. Czy możesz skorzystać z którejkolwiek z tych opcji?
David mówi, że przywróć Monice

jakie jest twoje środowisko Javascript, Jquery, coś innego?
kasdega

@david Mogę faktycznie użyć dowolnego z nich
user780483,

By użyć jQuery kombinacją .focus () i .keydown ()
kasdega

Odpowiedzi:


120

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/


13
„$ (this) .get (0) .selectionStart”. Użyj po prostu „this.selectionStart”
Bohdan Yurov

Czy możesz to sprawić, aby działało z 4 spacjami zamiast \ t? Jeśli zamienisz \ t na "", wstawi to spacje, ale pozostawi karetkę.
Sinaesthetic

@Sinaesthetic - spóźniona odpowiedź, ale aby przesunąć kursor, ustaw ostatnią linię na „start + 4” zamiast „start + 1”
nevada_scout

4
Zwykle nie kopiuję kodu bezpośrednio ze Stackoverflow i nie wklejam go do mojego projektu i nie uruchamiam, ale kiedy to robię, był to ten kod. Dzięki za to.
Flat Cat

10
To przerywa funkcję cofania przeglądarki (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; 
        }
    }
}

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


Czy możesz to sprawić, aby działało z 4 spacjami zamiast \ t? Jeśli zamienisz \ t na "", wstawi to spacje, ale pozostawi karetkę.
Sinaesthetic

1
@Sinaesthetic: tak, możesz zmienić tabulator na spacje, ale musisz trochę dostosować kod (zamiast jednej są 3-4 nowe litery). Inną alternatywą jest rozmiar karty CSS.
Adrian Maire

@Sinaesthetic Tak, po prostu zastąpić ostatni wiersz this.selectionEnd = s+1;z this.selectionEnd = s + "\t".length;. Byłoby bardziej przejrzyste użycie zmiennej lub parametru funkcji i przechowywanie w nim znaków wcięcia. Ale wiesz, co teraz zastąpić: +1określa, o ile znaków zostanie przesunięty daszek.
StanE

2
KeyboardEvent.keyCodei KeyboardEvent.whichsą przestarzałymi właściwościami. Użyj KeyboardEvent.keyzamiast tego.
Константин Ван

48

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.


2
Dziękuję Ci. Nie chcę brzmieć niegrzecznie, ale nie wiedziałem, że niewidomi używają komputerów. Będę o tym pamiętać
user780483

10
W porządku, wiele osób nie wie; to jest poza ich doświadczeniem. Oto wprowadzenie: webaim.org/intro
Will Martin,

Tak, naprawdę zły pomysł, jeśli jest to witryna dla ogółu odbiorców. Oprócz użytkowników czytników ekranu istnieje wielu innych użytkowników, którzy z różnych powodów muszą lub decydują się na nawigację za pomocą klawiatury. Uwięzienie klawisza tabulatora sprawi, że formularz będzie co najmniej denerwujący i prawdopodobnie bezużyteczny dla tych użytkowników.
steveax

6
Może użyj control + tab. Spowoduje to przechwycenie możliwości przeglądarki na inne karty (strony internetowe), ale użytkownicy mogą po prostu wyrzucić kartę z pola tekstowego, a następnie sterować kartą do innej strony. Powinien mieć podpowiedź na stronie, użyj ctrl + tab dla tabulatora.
Joseph McIntyre

Dzięki @WillMartin Bardzo cenna informacja. Zamierzałem zaimplementować to samo w całym swoim blogu dla wszystkich tekstów bez rozważania tego bardzo kluczowego punktu.
Imran

40

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.


Pan jest niesamowity.
NiCk Newman

1
Jak mogę zmodyfikować ten kod, aby używał 4 spacji zamiast tabulatora? Próbowałem zrobić & nbsp; cztery razy, ale nadal zamieniało go w jedną spację.
jiaweizhang

5
NiCk, proszę powiedz mojej żonie. jiaweizhang, zamień „\ t” na „<4 spacje>”, a 1 na 4.
elgholm

1
Najlepsza odpowiedź!
Marco Demaio

1
Bardzo fajnie, tutaj jest na odwrót przez 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

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>


1
To najlepsza odpowiedź.
FourCinnamon0

Działa to bez jQuery przy odrobinie pracy. Aby uzyskać pomoc, wejdź na youmightnotneedjquery.com. Zdecydowanie najlepsza odpowiedź również tutaj.
Jamon Holmgren

10

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:


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


3
To jest jedyna poprawna odpowiedź w tym momencie. Wielkie dzięki. 🙏
Chris Calo,

2
Niestety brak obsługi przeglądarki Firefox. Wypróbuj rozwiązanie indent-textareadla różnych przeglądarek, które wykorzystuje tę metodę + rezerwę w przeglądarce Firefox.
fregante

W przeglądarce Firefox document.execCommandzostaje włączona dopiero po ustawieniu document.designMode = "on";. Jestem w stanie napisać tekst do elementów, które mają .contentEditable = 'true'. Jednak gdy próbuję to osiągnąć na obszarze tekstowym, wstawiony element textNode zostaje umieszczony bezpośrednio przed obszarem tekstu w dokumencie (zamiast w obszarze tekstowym). Proszę spróbować pomóc Mozilla rysunek to tutaj .
Lonnie Best

Należy pamiętać, że ta strona nie jest już uważana za „nowoczesną”, strona, do której utworzono łącze, zauważa (o której execCommand): „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ć.
kasimir

9

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>

Bardzo ważne jest, aby zadzwonić element.triggerHandler('change');, w przeciwnym razie model nie zostanie zaktualizowany (ze względu na element.triggerHandler('change');myślę.
Alvaro Flaño Larrondo

6

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

2
Nie zapomnij również zapobiec domyślnej akcji. event.preventDefault();
Ryan,

2
Live zostało zastąpione przez w nowszych wersjach.
Eric Harms

Właściwość event.which normalizuje event.keyCode i event.charCode . Nie musisz tego sprawdzać e.keyCode || e.which.
Trevor

6

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

1
Jak dotąd najlepsze rozwiązanie, ale prawdopodobnie nie powinno tworzyć selekcji, kiedy start === end.
mpen

6

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>


Działa to dobrze, ale możesz przynajmniej ograniczyć tabulator shift bez wybierania błędów. Zrobiłem to za pomocą prostego if (selected.length > 0) {...}Fiddle: jsfiddle.net/jwfkbjkr

3

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/


3

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>

2
Ten kod psuje jednak stos cofania. Po użyciu wstaw kartę, czasami nie można niczego cofnąć lub zrobić tylko 1-2 kroki wstecz.
Magnus Eriksson

2

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


2

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>

2

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.


1

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.


Jaka część tego skryptu działa tylko w przeglądarce Chrome? Czy to „TextEvent”? help.dottoro.com/lagstsiq.php/#TextEvent Ta strona twierdzi, że powinna działać również w IE9 + i Safari. Ponieważ potrzebuję tego do aplikacji Chrome, jest to idealne.
Andreas Linnert

@Andreas Linnert masz rację. Udokumentowano, że działa zarówno w przeglądarce IE, jak i Safari. Jednak w momencie pisania tego tekstu IE nie działał dla mnie i po prostu nie miałem czasu, aby się temu przyjrzeć i nie testowałem w Safari. Przepraszamy za zamieszanie. Cieszę się, że pomogłem.
iautomation

0

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

Niezła odpowiedź, ale patrząc na kod, używa prawie takich samych technik, jak te opisane w niektórych odpowiedziach tutaj: github.com/wjbryant/taboverride/blob/master/src/… . Oznacza to, że nie zachowuje historii cofania, która jest głównym problemem.
mihai

0

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

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

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

-1

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 )


Kod to:

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

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

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

-1

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

-3

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


2
Myślę, że to odpowiedź, choć bardzo zła. Sugeruje alternatywne podejście, tj. Dając użytkownikowi końcowemu obejście.
GS - Przeproś Monikę
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.