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

Il existe un plugin Chrome appelé Formateur de code de zone de texte .

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

Cependant, il arrive souvent que l'on veuille un comportement standard pour l'insertion des tabulations. Si vous utilisez la tabulation pour passer d'une boîte à l'autre, vous pouvez sélectionner "désactivé" par défaut dans les options.

Si c'est votre site :

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

jQuery(document).ready(function () {

     $("textarea").tabby();

});

Chargez d'abord jQuery et le plugin, puis vous pouvez tabuler et créer un onglet, et shift+tab pour "détabler" en quelque sorte.

Pour un support à l'échelle du navigateur, vous devrez utiliser une extension, un userscript, un plugin, etc. comme : 46704 pour Greasemonkey .

Je me suis amusé avec AutoHotkey un peu pour obtenir cette capacité, et la seule façon de mettre un caractère de tabulation dans les champs de texte du formulaire qui fonctionne pour moi est de pâte le caractère de tabulation du presse-papiers.

;
; Paste TAB character (U+0009) from clipboard
;
CapsLock & TAB::
ClipSaved := ClipboardAll
Clipboard := ""
Clipboard := A_TAB
ClipWait
Send ^v
Sleep 100
if (ClipSaved)
{
  Clipboard := ""
  Clipboard := ClipSaved
  ClipWait
  ClipSaved = ""
}
return

Cela s'avère parfois utile, même en dehors des navigateurs.

Le grand avantage de Tabinta en Firefox est que vous pouvez associer le caractère tabulation à une autre touche de raccourci, car vous ne voulez vraiment pas perdre le comportement par défaut de la touche tabulation dans le navigateur.

Con Internet Explorer vous n'avez aucune solution en matière d'extensions de navigateur à ma connaissance. Ici, le seul moyen est de conserver le caractère de tabulation dans le presse-papiers en l'ayant préalablement copié depuis un autre programme comme 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. Alors que les combinaisons de codes de touche alt dans les deux navigateurs exécutent toujours l'événement normal de pression de touche du caractère tabulation, elles ne fonctionnent pas non plus.

Pour taper la touche de tabulation dans une zone de texte, vous pouvez utiliser un script comme ceci (la zone de texte qui accepte les touches de tabulation se nomme 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 le codage dur, vous pouvez mettre ce code dans une fonction nommée EnableTabType . La fonction n'a qu'un seul paramètre, qui spécifie ce qui est TextBox où vous devez permettre 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