Utiliser la tabulation pour mettre en retrait dans la zone de texte

J'ai un simple textarea html de mon côté. En ce moment, si vous cliquez sur l'onglet, cela passe au champ suivant. Je voudrais plutôt que le bouton de tabulation indente quelques espaces. Comment puis-je faire ceci? Merci.

Emprunter beaucoup d'autres réponses pour des questions similaires (affichées ci-dessous) ...

$(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: Comment capturer la pression de touche TAB dans une zone de texte

Comment gérer <tab> dans 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; 
        }
    }
}

Cette solution ne nécessite pas jQuery et activera la fonctionnalité d'onglet sur toutes les zones de texte d'une page.

Comme d'autres l'ont écrit, vous pouvez utiliser JavaScript pour capturer l'événement, empêcher l'action par défaut (afin que le curseur ne déplace pas le focus) et insérer un caractère de tabulation.

Cependant , la désactivation du comportement par défaut rend impossible le déplacement du focus hors de la zone de texte sans utiliser de souris. Les utilisateurs aveugles interagissent avec les pages Web à l'aide du clavier et de rien d'autre - ils ne peuvent pas voir le pointeur de la souris pour faire quoi que ce soit d'utile, donc c'est le clavier ou rien d'autre. La touche de tabulation est le principal moyen de naviguer dans le document, et en particulier dans les formulaires. Remplacer le comportement par défaut de la touche de tabulation rendra impossible pour les utilisateurs aveugles de déplacer le focus vers l'élément de formulaire suivant.

Donc, si vous écrivez un site Web pour un large public, je vous recommande de ne pas le faire sans raison impérieuse et de fournir une sorte d'alternative aux utilisateurs aveugles qui ne les piège pas dans la zone de texte.

Pour ce que ça vaut, voici mon oneliner, pour ce dont vous avez tous parlé dans ce fil:

<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é dans les dernières éditions de Chrome, Firefox, Internet Explorer et Edge.

Voici ma version de ceci, prend en charge:

• tab + shift tab
• maintient la pile d'annulation pour les insertions de caractères de tabulation simples
• prend en charge l'indentation / unindentation de ligne de bloc mais supprime la pile d'annulation
• sélectionne correctement des lignes entières lors du retrait / désindentation du bloc
• prend en charge l'indentation automatique en appuyant sur Entrée (maintient la pile d'annulation)
• Utilisez la touche Échap pour annuler le support sur l'onglet suivant / la touche Entrée (vous pouvez donc appuyer sur Échap puis sortir)
• Fonctionne sur Chrome + Edge, d'autres non testés.

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

De manière moderne, les deux sont simples et ne perdent pas la possibilité d'annuler (Ctrl + Z) les dernières modifications.

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

En savoir plus execCommand:

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

Éditer:

Comme indiqué dans le commentaire (et bien que ce fût autrefois une solution «moderne» ), la fonctionnalité est devenue obsolète. Citant les documents:

Cette fonctionnalité est obsolète. Bien qu'il puisse toujours fonctionner dans certains navigateurs, son utilisation est déconseillée car il peut être supprimé à tout moment. Essayez d'éviter de l'utiliser.

Je n'allais nulle part rapidement en essayant d'utiliser la réponse de @ kasdega dans un environnement AngularJS, rien de ce que j'ai essayé ne semblait capable de faire agir Angular sur le changement. Donc, au cas où cela serait utile aux passants, voici une réécriture du code de @ kasdega, style AngularJS, qui a fonctionné pour moi:

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

et:

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

Vous devez écrire du code JS pour attraper la pression de la touche TAB et insérer un tas d'espaces. Quelque chose de similaire à ce que fait JSFiddle.

Vérifiez jquery fiddle :

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 d'indétation sur plusieurs lignes basé sur la solution @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;
    }
});

Cette solution permet de tabuler dans une sélection entière comme votre éditeur de code typique, et de supprimer cette sélection également. Cependant, je n'ai pas compris comment implémenter shift-tab quand il n'y a pas de sélection.

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

Sur la base de tout ce que les gens avaient à dire ici sur les réponses, c'est juste une combinaison de keydown (pas de keyup) + preventDefault () + insérez un caractère de tabulation au curseur. Quelque chose comme:

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

La réponse précédente avait un jsfiddle fonctionnel mais il utilisait une alerte () lors du keydown. Si vous supprimez cette alerte, cela n'a pas fonctionné. Je viens d'ajouter une fonction pour insérer une tabulation à la position actuelle du curseur dans la zone de texte.

Voici un jsfiddle fonctionnel pour le même: http://jsfiddle.net/nsHGZ/

Je vois que ce sujet n'est pas résolu. J'ai codé ceci et cela fonctionne très bien. Il insère une tabulation à l'index du curseur. Sans utiliser 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>

Maintenez ALT enfoncé et appuyez sur 0,9 à partir du pavé numérique. Cela fonctionne dans google-chrome

J'en ai créé un auquel vous pouvez accéder avec n'importe quel élément textarea que vous aimez:

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

Et l'élément ressemblerait à ceci:

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

Le moyen le plus simple que j'ai trouvé de faire cela dans les navigateurs modernes avec JavaScript vanilla est:

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

Notez que j'ai utilisé de nombreuses fonctionnalités ES6 dans cet extrait de code par souci de simplicité, vous voudrez probablement le transpiler (avec Babel ou TypeScript) avant de le déployer.

Ce qui précède répond à tous les effacer l'historique des annulations Pour tous ceux qui recherchent une solution qui ne le fait pas, j'ai passé la dernière heure à coder ce qui suit pour 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);
    });
};

En bref, des onglets sont insérés au début des lignes sélectionnées.

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

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

Exemple d'utilisation: $('textarea').enableTabs('\t')

Inconvénients: ne fonctionne que sur Chrome tel quel.

Il existe une bibliothèque sur Github pour la prise en charge des onglets dans vos zones de texte par wjbryant: Tab Override

Voilà comment cela fonctionne:

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

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

En tant qu'option du code de kasdega ci-dessus, au lieu d'ajouter l'onglet à la valeur actuelle, vous pouvez à la place insérer des caractères au point actuel du curseur. Cela a l'avantage de:

• vous permet d'insérer 4 espaces comme alternative à la tabulation
• annuler et refaire fonctionneront avec les caractères insérés (ce ne sera pas le cas avec l'OP)

alors remplacez

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

avec

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

Essayez cette fonction jQuery simple:

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

J'ai dû créer une fonction pour faire de même, c'est simple à utiliser, copiez simplement ce code dans votre script et utilisez: enableTab( HTMLElement )HTMLelement étant quelque chose commedocument.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}}}

Chaque entrée d'un élément textarea a un événement onkeydown. Dans le gestionnaire d'événements, vous pouvez empêcher la réaction par défaut de la touche de tabulation en utilisant event.preventDefault () chaque fois que event.keyCode vaut 9.

Ensuite, placez un signe de tabulation dans la bonne position:

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 autonome simple:

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

Si vous avez vraiment besoin d'onglets, copiez un onglet à partir de Word ou du bloc-notes et collez-le dans la zone de texte où vous le souhaitez

1 2 3

12 22 33

Malheureusement, je pense qu'ils suppriment les onglets de ces commentaires :) Il apparaîtra comme% 09 dans votre POST ou GET