122

A lot of the time, when I want to format text within a web page's text box I'll hit the Tab key.

Unfortunately, that doesn't insert the tab character but instead moves the control to the next form element (like a button or a check box).

For browsers like Firefox/IE, is there a way to get the formatting behavior of a tab, within a text box, by typing a key combination?

Oliver Salzburg
  • 89,072
  • 65
  • 269
  • 311
Rohit
  • 1,649

12 Answers12

87

In Windows, you can push Alt+09. This only works with the number pad number keys. (Release Alt after pressing the last number key.)

Sam
  • 1,476
ta.speot.is
  • 14,323
69

Linux and other POSIX systems (except Mac OS):

To input tabs in GTK+ applications (like Firefox or Chrome):

  1. Ctrl + Shift + U

  2. Type 9

  3. Press Space or Enter

Source: Wikipedia: Unicode Input

Janus Troelsen
  • 2,355
17

In Safari and Firefox on Mac OS X, you can press ControlOptionTab to insert a tab in the text field you're currently editing.

Daniel Beck
  • 111,893
17

Open Notepad or similar text editor, and start a new blank document. Type Tab. Copy your tab character to the clipboard. (On Windows, Ctrl+A, Ctrl+C will do this).

Now switch back to the textarea in your browser. Position the cursor where you want it, and paste the tab character. (Ctrl+V on Windows).

Voila, done!

Doin
  • 271
8

There is a Chrome plugin called Textarea Code Formatter.

It allows you insert tabs into text boxes in the Chrome browser. It also allows you to highlight multiple lines and insert tabs before each selected line.

However, an issue is that often you want standard tab insertion behaviour. If you do use tab to toggle between boxes, then you may to select "disabled" by default in the options.

pelms
  • 9,361
Jeromy Anglim
  • 741
4

If it's your site:

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

jQuery(document).ready(function () {

     $("textarea").tabby();

});

Load jQuery and the plugin first, then you can tab and make a tab, and shift+tab to "untab" as it were.

For browser-wide support, you will have to use an extension, userscript, plugin, etc. like: 46704 for Greasemonkey.

EKons
  • 147
Grizly
  • 879
3

I've messed with AutoHotkey a bit to get this ability, and the only way to put tab character into form text fields that works for me is to paste the tab character from clipboard.

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

This occasionally comes in handy even outside browsers.

myf
  • 531
1

The big advantage of Tabinta in Firefox is that you can map the tab character to another hotkey, since you really don't want to lose the tab key default behavior in the browser.

With Internet Explorer you have no solution in the way of browser extensions that I am aware of. Here the only way is to keep the tab character in the clipboard by having previously copied it from some other program like notepad.

javascript solutions require the name of the textbox where they will act on, so this is far from ideal or practical. While alt keycode combinations under both browsers still execute the normal tab character keypress event so they don't work either.

A Dwarf
  • 19,329
0

or using ahk to insert 4*space in editor:

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

you can see code details explaintation in ahk code

doppelgreener
  • 421
  • 1
  • 11
  • 34
Lu Zhao
  • 1
0

To type the tab key in a text box, you can use a script like this (text box which accepts tab keys is named 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}; ");

Or better, to avoid hard coding, you can put this code in a function named EnableTabType. The function has only one parameter, which specifies what is TextBox control where you need to enable typing of Tab characters.

[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

Sk8erPeter
  • 1,140
admintech
  • 7,032
0

Tab Grabber is kinda like Tabinta, only for Chrome (allows TABs in textarea fields).

SiteKickr
  • 1,196
0

Use jQuerry's tabby! Supports select row and press tab odr SHIFT TAB

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

liquid2026
  • 1