web-dev-qa-db-fra.com

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

Souvent, lorsque je veux formater du texte dans la zone de texte d'une page Web, je clique sur le Tab clé.

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 des navigateurs tels que Firefox/IE, existe-t-il un moyen d'obtenir le comportement de formatage d'un onglet, au sein d'une zone de texte, en tapant une combinaison de touches?

keyboardbrowser
86
Rohit

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

10
invert

Sous Windows, vous pouvez pousser Alt+9. Cela ne fonctionne qu'avec les touches numériques du pavé numérique. (Libération Alt après avoir appuyé sur la dernière touche numérique.)

61
ta.speot.is

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 Space ou Enter

Source: Wikipedia: Entrée Unicode

46
Janus Troelsen

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

13
Daniel Beck

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+C va le faire).

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

Voilà, c'est fini!

9
Doin

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'onglet standard. Si vous utilisez l'onglet pour basculer entre les cases, vous pouvez alors sélectionner "désactivé" par défaut dans les options.

8
Jeromy Anglim

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 .

4
Grizly

J'ai un peu gâché wit AutoHotkey pour obtenir cette capacité, et la seule solution «à toute épreuve» que j'ai trouvée est vraiment de coller (ne pas 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.

1
myf

Le gros avantage de Tabinta in 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 touche de tabulation dans le navigateur.

Avec Internet Explorer vous n’avez pas de solution en ce qui concerne les extensions de navigateur que je connaisse. Dans ce cas, le seul moyen est de conserver le caractère de tabulation dans le presse-papiers en le copiant précédemment à partir d'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 continuent d'exécuter l'événement de frappe de caractère de tabulation normal, elles ne fonctionnent pas non plus.

1
A Dwarf

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

0
SiteKickr

Utilisez le tabby de jQuerry! Prend en charge la sélection de ligne et appuyez sur la touche Tab ou Maj Tab

http://www.herby.sk/trapped/bower_components/jquery-tabby/textarea.mirror.html

0
liquid2026

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 placer ce code dans une fonction nommée EnableTabType. La fonction a un seul paramètre, qui spécifie le contrôle TextBox pour lequel vous devez activer la saisie des 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

0
admintech

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 dans ahk code

0
Lu Zhao