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


143

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.


C'est faisable avec JavaScript, et presque facile avec une bibliothèque JS. Pouvez-vous utiliser l'une de ces options?
David dit de réintégrer Monica le

quel est ton environnement? Javascript, Jquery, autre chose?
kasdega le

@david Je peux réellement utiliser n'importe lequel de ceux-ci
user780483

J'utiliserais jquery avec une combinaison de .focus () et .keydown ()
kasdega

Réponses:


121

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/


13
"$ (this) .get (0) .selectionStart". Utilisez simplement "this.selectionStart"
Bohdan Yurov

Pouvez-vous faire fonctionner cela avec 4 espaces au lieu d'un \ t? Si vous remplacez \ t par "", il insérera les espaces mais laissera le curseur derrière.
Sinaesthetic

@Sinaesthetic - réponse tardive, mais pour déplacer le curseur, ajustez la dernière ligne pour qu'elle soit 'start + 4' au lieu de 'start + 1'
nevada_scout

4
Je ne copie généralement pas le code directement à partir de Stackoverflow, je ne le colle pas dans mon projet et je le fais fonctionner, mais quand je le fais, c'était ce code. Merci pour cela.
Flat Cat

10
Cela interrompt la fonction d'annulation du navigateur (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; 
        }
    }
}

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


Pouvez-vous faire fonctionner cela avec 4 espaces au lieu d'un \ t? Si vous remplacez \ t par "", il insérera les espaces mais laissera le curseur derrière.
Sinaesthetic

1
@Sinaesthetic: oui, vous pouvez changer de tabulation en espaces, mais vous devez adapter un peu le code (il y a 3-4 nouvelles lettres au lieu d'une). L'autre alternative est la taille de l'onglet CSS.
Adrian Maire

@Sinaesthetic Oui, remplacez simplement la dernière ligne this.selectionEnd = s+1;par this.selectionEnd = s + "\t".length;. Il serait plus simple d'utiliser une variable ou un paramètre de fonction et d'y stocker le (s) caractère (s) d'indentation. Mais vous savez quoi remplacer maintenant: Le +1définit combien de caractères le curseur est déplacé.
StanE

2
KeyboardEvent.keyCodeet KeyboardEvent.whichsont des propriétés obsolètes. Utilisez KeyboardEvent.keyplutôt.
Константин Ван

48

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.


2
Merci. Je ne veux pas paraître grossier, mais je ne savais pas que les aveugles utilisaient des ordinateurs. Je vais garder cela à l'esprit
user780483

10
C'est bon, beaucoup de gens ne le savent pas; c'est juste en dehors de leur expérience. Voici une introduction: webaim.org/intro
Will Martin

Ouais, vraiment mauvaise idée s'il s'agit d'un site Web destiné au grand public. En plus des utilisateurs de lecteurs d'écran, il existe de nombreux autres utilisateurs qui, pour diverses raisons, doivent ou choisissent de naviguer avec le clavier. Le piégeage de la touche de tabulation rendra le formulaire au moins ennuyeux et probablement inutilisable pour ces utilisateurs.
steveax

6
Peut-être utiliser control + tab. Cela augmentera la capacité des navigateurs à accéder à d'autres onglets (pages Web), mais les utilisateurs peuvent simplement sortir de la zone de texte, puis contrôler l'onglet vers l'autre page. Devrait avoir un indice sur la page, utilisez ctrl + tab pour tab.
Joseph McIntyre

Merci @WillMartin Information très précieuse. J'allais implémenter la même chose dans tout mon blog pour toutes les zones de texte sans tenir compte de ce point très crucial.
Imran

40

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.


Vous monsieur, êtes incroyable.
NiCk Newman

1
Comment puis-je modifier ce code pour utiliser 4 espaces au lieu d'une tabulation? J'ai essayé de faire & nbsp; quatre fois mais il l'a quand même converti en un seul espace.
jiaweizhang

5
NiCk, dites-le à ma femme. jiaweizhang, remplacez '\ t' par '<4 espaces>' et 1 par 4.
elgholm

1
La meilleure réponse!
Marco Demaio

1
Très soigné, voici l'inverse via 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

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>


1
C'est la meilleure réponse ici.
FourCinnamon0

Cela fonctionne sans jQuery avec un peu de travail. Consultez youmightnotneedjquery.com pour obtenir de l'aide. Certainement la meilleure réponse ici aussi.
Jamon Holmgren

10

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:


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


3
C'est la seule réponse correcte à ce stade. Un immense merci. 🙏
Chris Calo

2
Malheureusement pas de support Firefox. Essayez indent-textareaune solution multi-navigateurs qui utilise cette méthode + une solution de secours dans Firefox.
fregante

Dans Firefox, document.execCommandne devient activé qu'après la configuration document.designMode = "on";. Je suis capable de faire écrire du texte dans des éléments qui ont .contentEditable = 'true'. Cependant, lorsque j'essaie d'accomplir cela sur une zone de texte, le textNode inséré est placé juste avant la zone de texte dans le document (au lieu de dans la zone de texte). Veuillez essayer d'aider Mozilla à comprendre cela ici .
Lonnie Best

Attention, cela n'est plus considéré comme «moderne», la page que vous avez liée note (à propos execCommand): «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.
kasimir

9

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>

Il est très important d'appeler element.triggerHandler('change');, sinon le modèle ne sera pas mis à jour (à cause du element.triggerHandler('change');je pense.
Alvaro Flaño Larrondo

6

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

2
N'oubliez pas également d'empêcher l'action par défaut. event.preventDefault();
Ryan

2
Live a été remplacé par on dans les versions plus récentes.
Eric Harms

La propriété event.which normalise event.keyCode et event.charCode . Vous ne devriez pas avoir besoin de vérifier e.keyCode || e.which.
Trevor

6

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

1
La meilleure solution jusqu'à présent, mais elle ne devrait probablement pas créer de sélection quand start === end.
mpen

6

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>


Cela fonctionne bien, mais vous pouvez au moins limiter l'onglet de décalage sans sélection d'erreurs de lancement. Je l'ai fait avec simple if (selected.length > 0) {...}Fiddle: jsfiddle.net/jwfkbjkr

3

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/


3

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>

2
Ce code gâche la pile d'annulation, cependant. Après utilisation, insérez un onglet, parfois vous ne pouvez rien annuler ou juste 1 à 2 pas en arrière.
Magnus Eriksson

2

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


2

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>

2

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.


1

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.


Quelle partie de ce script ne fonctionne que dans Chrome? Est-ce le "TextEvent"? help.dottoro.com/lagstsiq.php/#TextEvent Ce site indique qu'il devrait également fonctionner dans IE9 + et Safari. Puisque j'en ai besoin pour une application Chrome, c'est parfait.
Andreas Linnert

@Andreas Linnert vous avez raison. Il est documenté pour fonctionner à la fois dans IE et Safari. Cependant, au moment d'écrire ces lignes, IE ne fonctionnait pas pour moi, et je n'avais tout simplement pas le temps de l'examiner plus en détail, et je n'avais pas testé dans Safari. Toutes mes excuses pour la confusion. Je suis content d'avoir aidé.
iautomation

0

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

Ce n'est pas une mauvaise réponse, mais en regardant le code, il utilise à peu près les mêmes techniques que celles décrites dans certaines des réponses ici: github.com/wjbryant/taboverride/blob/master/src/… . Cela signifie qu'il ne conserve pas l'historique des annulations, qui est le principal problème.
mihai

0

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

-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

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

-1

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 )


Le code est:

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

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>

-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

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

-3

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


2
Je pense que c'est une réponse, bien que très mauvaise. Cela suggère une approche alternative, c'est-à-dire donner à l'utilisateur final une solution de contournement.
GS - Présentez vos excuses à Monica
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.