Utilizzare la scheda per rientrare nell'area di testo

Ho una semplice textarea HTML dalla mia parte. In questo momento, se fai clic sulla scheda in essa, passa al campo successivo. Vorrei invece fare rientrare di alcuni spazi il pulsante della scheda. Come posso fare questo? Grazie.

Prendere in prestito pesantemente da altre risposte per domande simili (postate di seguito) ...

$(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: come acquisire il tasto TAB all'interno di una casella di testo

Come gestire <tab> in 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; 
        }
    }
}

Questa soluzione non richiede jQuery e abiliterà la funzionalità della scheda su tutti i textareas in una pagina.

Come altri hanno scritto, è possibile utilizzare JavaScript per acquisire l'evento, impedire l'azione predefinita (in modo che il cursore non sposta lo stato attivo) e inserire un carattere di tabulazione.

Tuttavia , disabilitare il comportamento predefinito rende impossibile spostare il focus fuori dall'area di testo senza usare il mouse. Gli utenti non vedenti interagiscono con le pagine Web utilizzando la tastiera e nient'altro: non possono vedere il puntatore del mouse per fare qualcosa di utile con esso, quindi è tastiera o niente. Il tasto tab è il modo principale per navigare nel documento, e in particolare i moduli. La sostituzione del comportamento predefinito del tasto Tab renderà impossibile per gli utenti non vedenti spostare lo stato attivo sull'elemento modulo successivo.

Quindi, se stai scrivendo un sito Web per un vasto pubblico, consiglierei di non farlo senza un motivo convincente e fornirei una sorta di alternativa per gli utenti non vedenti che non li intrappolano nell'area di testo.

Per quello che vale, ecco il mio oneliner, per quello di cui tutti voi avete parlato in questo thread:

<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 nelle ultime edizioni di Chrome, Firefox, Internet Explorer e Edge.

Ecco la mia versione di questo, supporta:

• tab + shift tab
• mantiene lo stack di annullamento per semplici inserimenti di caratteri tab
• supporta il rientro / il rientro della linea di blocco ma elimina lo stack
• seleziona correttamente intere righe quando il rientro / il rientro del blocco
• supporta il rientro automatico alla pressione di invio (mantiene lo stack di annullamento)
• utilizzare il tasto Esc annulla il supporto nella scheda successiva / tasto invio (in modo da poter premere Esc quindi uscire dalla scheda)
• Funziona su Chrome + Edge, altri non testati.

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

Modo moderno che entrambi sono diretti e non perdono la possibilità di annullare (Ctrl + Z) le ultime modifiche.

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

Maggiori informazioni su execCommand:

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

Modificare:

Come sottolineato nel commento (e mentre una volta era una soluzione "moderna" ), la funzionalità è diventata obsoleta. Citando i documenti:

Questa funzione è obsoleta. Sebbene possa funzionare ancora in alcuni browser, il suo utilizzo è sconsigliato poiché potrebbe essere rimosso in qualsiasi momento. Cerca di evitare di usarlo.

Non stavo arrivando da nessuna parte nel tentativo di utilizzare la risposta di @ kasdega in un ambiente AngularJS, nulla di ciò che ho provato mi è sembrato in grado di far agire Angular sul cambiamento. Quindi, nel caso sia utile ai passanti, ecco una riscrittura del codice di @ kasdega, stile AngularJS, che ha funzionato per me:

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

e:

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

Devi scrivere il codice JS per catturare il tasto TAB e inserire un sacco di spazi. Qualcosa di simile a quello che fa JSFiddle.

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

Script di indetazione su più righe basato sulla soluzione @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;
    }
});

Questa soluzione consente di tabulare in un'intera selezione come il tipico editor di codice e di annullare la selezione anche di quella selezione. Tuttavia, non ho capito come implementare shift-tab quando non c'è selezione.

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

Sulla base di tutto ciò che la gente ha da dire qui sulle risposte, è solo una combinazione di keydown (non keyup) + preventDefault () + inserire un carattere di tabulazione nel punto di inserimento. Qualcosa di simile a:

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

La risposta precedente aveva un jsfiddle funzionante ma utilizzava un alert () sul keydown. Se rimuovi questo avviso, allora non ha funzionato. Ho appena aggiunto una funzione per inserire una scheda nella posizione corrente del cursore nell'area di testo.

Ecco un jsfiddle funzionante per lo stesso: http://jsfiddle.net/nsHGZ/

Vedo che questo argomento non è risolto. L'ho codificato e funziona molto bene. Inserisce una tabulazione nell'indice del cursore. Senza usare 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>

Tenere premuto ALT e premere 0,9 dal tastierino numerico. Funziona in Google Chrome

Ne ho creato uno a cui puoi accedere con qualsiasi elemento textarea che ti piace:

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

E l'elemento sarebbe simile a questo:

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

Il modo più semplice che ho trovato per farlo nei browser moderni con JavaScript vanilla è:

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

Nota che ho usato molte funzionalità ES6 in questo frammento per semplicità, probabilmente vorrai traspilarlo (con Babel o TypeScript) prima di distribuirlo.

Quanto sopra risponde a tutti cancellare la cronologia degli annullamenti. Per chi è alla ricerca di una soluzione che non lo fa, ho trascorso l'ultima ora a codificare quanto segue per 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);
    });
};

In breve, le schede vengono inserite all'inizio delle righe selezionate.

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

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

Esempio di utilizzo: $('textarea').enableTabs('\t')

Contro: funziona solo su Chrome così com'è.

C'è una libreria su Github per il supporto delle schede nelle tue textareas di wjbryant: Tab Override

È così che funziona:

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

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

Come opzione al codice di kasdega sopra, invece di aggiungere la scheda al valore corrente, puoi invece inserire caratteri nel punto corrente del cursore. Questo ha il vantaggio di:

• consente di inserire 4 spazi in alternativa alla scheda
• annulla e ripristina funzionerà con i caratteri inseriti (non con l'OP)

quindi sostituisci

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

con

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

Prova questa semplice funzione 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();

Ho dovuto fare una funzione per fare lo stesso, è semplice da usare, basta copiare questo codice sul tuo script e usare: enableTab( HTMLElement )HTMLelement è qualcosa di similedocument.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}}}

Ogni input di un elemento textarea ha un evento onkeydown. Nel gestore eventi è possibile impedire la reazione predefinita del tasto tab usando event.preventDefault () ogni volta che event.keyCode è 9.

Quindi posizionare un segno di tabulazione nella posizione corretta:

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

Script autonomo semplice:

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

Se hai davvero bisogno di schede, copia una scheda da Word o Blocco note e incollala nella casella di testo nel punto desiderato

1 2 3

12 22 33

Purtroppo penso che rimuovano le schede da questi commenti :) :) Verrà mostrato come% 09 nel tuo POST o GET