Verwenden Sie die Registerkarte, um den Textbereich einzurücken

Ich habe einen einfachen HTML-Textbereich auf meiner Seite. Wenn Sie jetzt auf die Registerkarte klicken, wird das nächste Feld angezeigt. Ich möchte stattdessen die Tabulatortaste ein paar Leerzeichen einrücken. Wie kann ich das machen? Vielen Dank.

In hohem Maße von anderen Antworten auf ähnliche Fragen entlehnt (siehe unten) ...

$(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: So erfassen Sie den TAB-Tastendruck in einem Textfeld

Wie gehe ich mit <tab> im Textbereich um?

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

Diese Lösung erfordert kein jQuery und aktiviert die Registerkartenfunktionalität für alle Textbereiche auf einer Seite.

Wie andere geschrieben haben, können Sie das Ereignis mit JavaScript erfassen, die Standardaktion verhindern (damit der Cursor den Fokus nicht verschiebt) und ein Tabulatorzeichen einfügen.

Durch Deaktivieren des Standardverhaltens ist es jedoch unmöglich, den Fokus ohne Verwendung einer Maus aus dem Textbereich zu verschieben. Blinde Benutzer interagieren mit Webseiten über die Tastatur und nichts anderes - sie können den Mauszeiger nicht sehen, um etwas Nützliches damit zu tun, also ist es Tastatur oder nichts. Die Tabulatortaste ist die primäre Methode zum Navigieren im Dokument und insbesondere in Formularen. Durch Überschreiben des Standardverhaltens der Tabulatortaste können blinde Benutzer den Fokus nicht auf das nächste Formularelement verschieben.

Wenn Sie also eine Website für ein breites Publikum schreiben, würde ich davon abraten, dies ohne zwingenden Grund zu tun , und blinden Benutzern eine Alternative bieten, die sie nicht im Textbereich einfängt.

Für das, was es wert ist, hier ist mein Oneliner, für das, worüber Sie alle in diesem Thread gesprochen haben:

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

Test in den neuesten Editionen von Chrome, Firefox, Internet Explorer und Edge.

Hier ist meine Version davon, unterstützt:

• Tab + Shift Tab
• Behält den Rückgängig-Stapel für einfache Tabulatorzeicheneinfügungen bei
• Unterstützt Block Line Indent / Unindent, aber Papierkorb machen Stack rückgängig
• Wählt ganze Zeilen richtig aus, wenn Blockeinzug / Einrückung blockiert ist
• unterstützt den automatischen Einzug beim Drücken der Eingabetaste (behält den Rückgängig-Stapel bei)
• Verwenden Sie die Unterstützung zum Abbrechen der Escape-Taste auf der nächsten Registerkarte / Eingabetaste (damit Sie die Esc-Taste drücken und dann die Tabulatortaste drücken können).
• Funktioniert mit Chrome + Edge, andere nicht getestet.

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

Moderne Methode, bei der beide unkompliziert sind und nicht die Fähigkeit verlieren, die letzten Änderungen rückgängig zu machen (Strg + Z).

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

Mehr zu execCommand:

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

Bearbeiten:

Wie im Kommentar erwähnt (und obwohl dies einst eine "moderne" Lösung war ), ist die Funktion veraltet. Zitieren der Dokumente:

Diese Funktion ist veraltet. Obwohl es in einigen Browsern möglicherweise noch funktioniert, wird von seiner Verwendung abgeraten, da es jederzeit entfernt werden kann. Vermeiden Sie es.

Ich kam nicht schnell dahin, @ kasdegas Antwort in einer AngularJS-Umgebung zu verwenden. Nichts, was ich versuchte, schien Angular dazu zu bringen, auf die Änderung zu reagieren. Für den Fall, dass es für Passanten von Nutzen ist, hier eine Neufassung von @ kasdegas Code im AngularJS-Stil, der für mich funktioniert hat:

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

und:

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

Sie müssen JS-Code schreiben, um den TAB-Tastendruck abzufangen und eine Reihe von Leerzeichen einzufügen. Ähnlich wie JSFiddle.

Überprüfen Sie jquery Geige :

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

Mehrzeiliges Indetationsskript basierend auf der @ kasdega-Lösung.

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

Diese Lösung ermöglicht das Tabulieren einer gesamten Auswahl wie bei einem typischen Code-Editor und das Deaktivieren dieser Auswahl. Ich habe jedoch nicht herausgefunden, wie Shift-Tab implementiert werden soll, wenn keine Auswahl vorhanden ist.

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

Basierend auf all dem, was die Leute hier zu den Antworten zu sagen hatten, ist es nur eine Kombination aus Keydown (nicht Keyup) + PreventDefault () + Einfügen eines Tabulatorzeichens in das Caret. Etwas wie:

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

Die frühere Antwort hatte eine funktionierende jsfiddle, verwendete jedoch einen Alarm () bei Keydown. Wenn Sie diese Warnung entfernen, hat sie nicht funktioniert. Ich habe gerade eine Funktion hinzugefügt, um eine Registerkarte an der aktuellen Cursorposition im Textbereich einzufügen.

Hier arbeitet jsfiddle für dasselbe: http://jsfiddle.net/nsHGZ/

Ich sehe, dass dieses Thema nicht gelöst ist. Ich habe das codiert und es funktioniert sehr gut. Es wird eine Tabelle am Cursorindex eingefügt. Ohne jquery zu benutzen

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

Halten Sie ALT gedrückt und drücken Sie 0,9 auf dem Ziffernblock. Es funktioniert in Google-Chrome

Ich habe eine erstellt, auf die Sie mit jedem beliebigen Textbereichselement zugreifen können:

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

Und das Element würde so aussehen:

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

Der einfachste Weg , dies in modernen Browsern mit Vanille-JavaScript zu tun, ist:

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

Beachten Sie, dass ich in diesem Snippet der Einfachheit halber viele ES6-Funktionen verwendet habe. Sie sollten es wahrscheinlich (mit Babel oder TypeScript) transpilieren, bevor Sie es bereitstellen.

Die obigen Antworten beantworten alle Löschvorgänge. Für alle, die nach einer Lösung suchen, die dies nicht tut, habe ich die letzte Stunde damit verbracht, Folgendes für Chrome zu programmieren:

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

Kurz gesagt, am Anfang der ausgewählten Zeilen werden Registerkarten eingefügt.

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

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

Anwendungsbeispiel: $('textarea').enableTabs('\t')

Nachteile: Funktioniert nur in Chrome wie es ist.

Auf Github gibt es eine Bibliothek zur Unterstützung von Registerkarten in Ihren Textbereichen von wjbryant: Tab Override

So funktioniert es:

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

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

Als Option zum obigen Kasdega-Code können Sie anstelle der Registerkarte an den aktuellen Wert Zeichen am aktuellen Cursorpunkt einfügen. Dies hat den Vorteil von:

• Ermöglicht das Einfügen von 4 Leerzeichen als Alternative zur Registerkarte
• Rückgängig und Wiederherstellen funktioniert mit den eingefügten Zeichen (nicht mit dem OP)

also ersetzen

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

mit

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

Probieren Sie diese einfache jQuery-Funktion aus:

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

Ich musste eine Funktion erstellen, um dasselbe zu tun. Es ist einfach zu verwenden. Kopieren Sie einfach diesen Code in Ihr Skript und verwenden Sie: enableTab( HTMLElement )HTMLelement ist so etwas wiedocument.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}}}

Jede Eingabe eines Textarea-Elements hat ein Onkeydown-Ereignis. Im Ereignishandler können Sie die Standardreaktion der Tabulatortaste verhindern, indem Sie event.preventDefault () verwenden, wenn event.keyCode 9 ist.

Setzen Sie dann ein Tabulatorzeichen an die richtige Stelle:

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

Einfaches eigenständiges Skript:

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

Wenn Sie wirklich Registerkarten benötigen, kopieren Sie eine Registerkarte aus dem Wort oder Notizblock und fügen Sie sie in das gewünschte Textfeld ein

1 2 3

12 22 33

Leider denke ich, dass sie die Tabs aus diesen Kommentaren entfernen :) Es wird als% 09 in Ihrem POST oder GET angezeigt