Taper le caractère de tabulation dans les zones de texte du navigateur

89

Bien souvent, lorsque je veux formater du texte dans la zone de texte d'une page Web, j'appuie sur la Tabtouche.

Malheureusement, cela n'insère pas le caractère de tabulation mais déplace le contrôle vers l'élément de formulaire suivant (comme un bouton ou une case à cocher).

Pour les navigateurs tels que Firefox / IE, existe-t-il un moyen d'obtenir le comportement de la mise en forme d'un onglet dans une zone de texte en saisissant une combinaison de touches?

Rohit
la source

Réponses:

9

Tabinta est un add-on Firefox qui vous permet de faire cela.

inverser
la source
4
Une solution pour Chrome?
sorin
2
@SorinSbarnea: Voir ma réponse
Janus Troelsen le
Ce n'est plus compatible avec Firefox.
rory.ap
Ceci est un plugin qui fonctionne dans Firefox 64: addons.mozilla.org/en-US/firefox/addon/textarea-tabbing
Stefan_Fairphone
1
Ce plugin n'existe plus (sans faute de la réponse, cela fait presque une décennie que la question a été répondue et Firefox a beaucoup changé).
aoeu
63

Sous Windows, vous pouvez appuyer sur Alt+ 09. Cela ne fonctionne qu'avec les touches numériques du pavé numérique. (Relâchez Altaprès avoir appuyé sur la dernière touche numérique.)

ta.speot.is
la source
4
Assurez-vous que vous utilisez les touches NumPad
CatamountJack
@Chris: Lorsque je suis ces instructions exactes, il n'insère pas de caractère de tabulation, mais agit comme la touche de tabulation. Avez-vous essayé cela dans un navigateur Web?
Casebash
@Casebash Cela fonctionne dans cette fenêtre de commentaire, sous Chrome, sous Windows 7 x64.
Chris
2
Seulement si vous avez Windows et un clavier avec pavé numérique.
Escargot mécanique
1
... et si vous utilisez Chrome. FF le voit comme la touche de tabulation, IE ne semble rien faire. Encore une fois, +1 pour avoir rappelé ce simple vieux hack :)
Halil Özgür
50

Linux et autres systèmes POSIX (sauf Mac OS):

Pour entrer des onglets dans les applications GTK + (comme Firefox ou Chrome):

  1. Ctrl+ Shift+U

  2. Type 9

  3. Presse SpaceouEnter

Source: Wikipedia: Entrée Unicode

Janus Troelsen
la source
Cela fonctionne mais n'est pas utile pour indenter plusieurs lignes à la fois.
MYGz
13

Dans Safari et Firefox sur Mac OS X, vous pouvez appuyer sur ControlOptionTabpour insérer un onglet dans le champ de texte en cours de modification.

Daniel Beck
la source
7
On dirait que ça ne marche pas dans Chrome 50 sur El Cap
mardi
1
Ni sur Firefox 53 sur Sierra.
Jason R. Coombs
1
@ JasonR.Coombs fonctionne toujours dans Safari, il est donc raisonnable de supposer que quelque chose a changé dans Firefox au cours des quatre années écoulées depuis que j'ai écrit cette réponse.
Daniel Beck
9

Ouvrez le Bloc-notes ou un éditeur de texte similaire et créez un nouveau document vierge. Type Tab. Copiez votre caractère de tabulation dans le presse-papiers. (Sous Windows, Ctrl+ A, Ctrl+ le Cfera).

Revenez maintenant à la zone de texte de votre navigateur. Placez le curseur où vous le souhaitez et collez le caractère de tabulation. ( Ctrl+ Vsur Windows).

Voilà, c'est fini!

Doin
la source
1
Ciro, est-il cassé pour les zones de texte normales et les champs de saisie de texte, ou simplement des éléments "contenteditable"? Parce que si c'est juste un problème pour "contenteditable", cela pourrait ne pas affecter beaucoup de gens (le PO par exemple) ...
Doin
2
C'était la solution la plus simple, à moins que vous ne deviez le faire fréquemment.
mardi
8

Il existe un plugin Chrome appelé Textarea Code Formatter .

Il vous permet d'insérer des onglets dans des zones de texte du navigateur Chrome. Il vous permet également de mettre en évidence plusieurs lignes et d'insérer des onglets avant chaque ligne sélectionnée.

Cependant, le problème est que vous souhaitez souvent un comportement d'insertion d'onglets standard. Si vous utilisez l'onglet pour basculer entre les cases, vous pouvez alors sélectionner "désactivé" par défaut dans les options.

Jeromy Anglim
la source
4

Si c'est votre site:

plugin jQuery: http://teddevito.com/demos/textarea.html

jQuery(document).ready(function () {

     $("textarea").tabby();

});

Commencez par charger jQuery et le plug-in, puis vous pouvez faire un onglet et créer un onglet, puis décaler + tab sur "untab" pour ainsi dire.

Pour une prise en charge à l’échelle du navigateur, vous devrez utiliser une extension, un script utilisateur, un plugin, etc., comme: 46704 pour Greasemonkey .

Grizly
la source
Le lien est mort. C'est quoi tous ces trucs jQuery. Il doit y avoir un moyen d'accepter les onglets en utilisant JavaScript. Le plugin jQuery est toujours utile pour une solution déjà mise en œuvre, mais ce n'est pas vraiment la solution.
Triynko
Essayez ce chef: stackoverflow.com/a/13130
Grizly
1

Le gros avantage de Tabinta dans Firefox est que vous pouvez mapper le caractère de tabulation sur un autre raccourci clavier, car vous ne voulez vraiment pas perdre le comportement par défaut de la clé de tabulation dans le navigateur.

Avec Internet Explorer, vous n'avez aucune solution en termes d'extensions de navigateur que je sache. Ici, le seul moyen est de conserver le caractère de tabulation dans le presse-papiers en l’ayant copié au préalable dans un autre programme tel que le bloc-notes.

Les solutions javascript nécessitent le nom de la zone de texte sur laquelle elles vont agir, ce qui est loin d'être idéal ou pratique. Tandis que les combinaisons de codes de touches alt sous les deux navigateurs exécutent toujours l'événement de frappe de caractère de tabulation normal, elles ne fonctionnent donc pas non plus.

Un nain
la source
1

J'ai un peu gâché l'esprit avec AutoHotkey pour obtenir cette capacité, et la seule solution «à l'épreuve des balles» que j'ai trouvée est vraiment de coller (pas d'envoyer) le caractère de tabulation lui-même.

;
; TAB character
; pasted from clipboard
; win tab
;
#tab::
old_clip:=clipboard
clipboard:=A_Tab
clipWait
sendInput,^v
clipboard:=old_clip
clipWait
return

Il s'avère que cette liaison AHK est même utile dans les éditeurs de texte qui gèrent la frappe de touche TAB supplémentaire; par exemple. IDE configuré pour utiliser autoindent par espaces.

mon f
la source
0

Tab Grabber est un peu comme Tabinta, uniquement pour Chrome (autorise les tabulations dans les champs textarea).

SiteKickr
la source
0

Pour taper la touche de tabulation dans une zone de texte, vous pouvez utiliser un script comme celui-ci (la zone de texte qui accepte les touches de tabulation est nommée txtLongText):

[VB.NET]

txtLongText.Attributes.Add("onkeydown", _
"if(event.which || event.keyCode){if ((event.which == 9)" & _ 
"|| (event.keyCode == 9)) {document.getElementById('" & _ 
txtLongText.ClientID + "').selection = " & _
document.selection.createRange();" & _ 
txtLongText.ClientID & ".selection.text = " & _
" String.fromCharCode(9);return false;}} else {return true}; ")

[C #]

txtLongText.Attributes.Add("onkeydown", 
"if(event.which || event.keyCode){if ((event.which == 9)" +
"|| (event.keyCode == 9)) {document.getElementById('"+
txtLongText.ClientID + "').selection = document.selection.createRange();" + 
txtLongText.ClientID + ".selection.text = String.fromCharCode(9);return false;}} else {return true}; ");

Ou mieux, pour éviter un codage difficile, vous pouvez mettre ce code dans une fonction nommée EnableTabType. La fonction a un seul paramètre, qui spécifie quel TextBoxcontrôle est nécessaire pour permettre la saisie de caractères de tabulation.

[VB.NET]

Public Sub EnableTabType(tb As TextBox)
    tb.Attributes.Add("onkeydown", _
    "if(event.which || event.keyCode){if((event.which == 9)" & _ 
    "|| (event.keyCode == 9)) {document.getElementById('" & _ 
    tb.ClientID & "').selection=document.selection.createRange();" & _
    tb.ClientID & ".selection.text = " & _
    " String.fromCharCode(9);return false;}}else{return true};")
End Sub 

[C #]

public void EnableTabType(TextBox tb)
{ 
    tb.Attributes.Add("onkeydown", 
    "if(event.which || event.keyCode){if ((event.which == 9)" +
    "|| (event.keyCode == 9)) {document.getElementById('"+
    tb.ClientID + "').selection = document.selection.createRange();" +
    tb.ClientID + ".selection.text = String.fromCharCode(9);return false;}} else {return true}; ");
}

Source: http://www.beansoftware.com/ASP.NET-Tutorials/Access-Tab-Key.aspx

admintech
la source
0

ou en utilisant ahk pour insérer 4 * espace dans l'éditeur:

^Right::
tabspace:="    "
send,%tabspace%    
return 

vous pouvez voir les détails du code explaintation dans le code ahk

Lu Zhao
la source