Typing the tab character in browser text boxes

Question

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?

score 79 · Answer 1 · edited Jun 13 '13 at 01:35

79

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

edited Jun 13 '13 at 01:35

Sam

1,410
1
20
33

answered Feb 20 '10 at 08:38

ta.speot.is

14,205
3
33
48

6

Be sure you are using the NumPad keys – CatamountJack Mar 17 '10 at 00:30
1

@Chris: When I follow those exact instructions, it doesn't insert a tab character, but acts like the tab key. Did you try this in a web browser? – Casebash Apr 09 '10 at 04:39
@Casebash It works in this very comment window, in Chrome, in Windows 7 x64. – Christopher Apr 25 '10 at 15:27
2

Only if you have Windows and a keyboard with a numpad. – Mechanical snail Oct 11 '11 at 04:15
1

... and if you are using Chrome. FF sees it like the tab key, IE doesn't seem to do anything. Again, +1 for reminding this simple olden hack :) – Halil Özgür Dec 18 '11 at 17:48
@Chris, I don't think you need to release `Alt` until you've pressed *all* of the numbers. – Sam Jun 13 '13 at 01:19
6

This does not work for me in FF. – Pedro77 Feb 28 '14 at 13:39
1

Sadly no longer working FF 36.0.1 on Windows. – MZB Mar 14 '15 at 18:18
While this works in many applications, it does not work on IE 11/Windows 8. – Moby Disk Dec 05 '16 at 22:12
Tested and works in Chrome 59.0.3071.115, Windows 10 Pro. Best answer in my point of view, and easy to remember. tab Thanks! – Avatar Jul 14 '17 at 08:53
Works for me on current version of Microsoft Edge, Windows 11. I don't know why it changed behaviours, but it's back to normal now. Thanks for your help! – condosz Jun 12 '23 at 08:08

Janus Troelsen · Answer 2 · 2020-06-24T17:23:50.117

63

Linux and other POSIX systems (except Mac OS):

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

Ctrl + Shift + U

Type 9

Press Space or Enter

Source: Wikipedia: Unicode Input

edited Jun 24 '20 at 17:23

answered Oct 09 '12 at 09:21

Janus Troelsen

2,238
2
22
33

It works but not useful for indenting multiple lines at once. – Mohammad Yusuf Dec 27 '16 at 05:17
This worked in Chrome! – java-addict301 Jun 14 '22 at 17:27

score 16 · Answer 3 · answered Mar 27 '13 at 22:33

16

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

answered Mar 27 '13 at 22:33

Daniel Beck

109,300
14
287
334

12

Looks like this doesn't work in Chrome 50 on El Cap – jcollum May 23 '16 at 15:24
2

Nor on Firefox 53 on Sierra. – Jason R. Coombs May 25 '17 at 16:25
2

@JasonR.Coombs Still works in Safari, so it's safe to assume something changed in Firefox in the four years since I wrote this answer. – Daniel Beck May 25 '17 at 18:30

score 13 · Answer 4 · answered Sep 17 '14 at 18:33

13

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!

answered Sep 17 '14 at 18:33

Doin

231
2
4

1

Ciro, is it broken for regular textboxes and text input fields, or just "contenteditable" elements? Because if it's just a problem for "contenteditable", it might not affect that many people (the OP for example)... – Doin Aug 01 '15 at 12:46
2

This was the simplest solution, unless you need to do this frequently. – jcollum May 23 '16 at 15:33

score 8 · Answer 5 · edited Aug 03 '18 at 19:20

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.

edited Aug 03 '18 at 19:20

pelms

9,251
12
58
77

answered Oct 14 '12 at 07:37

Jeromy Anglim

721
1
10
18

score 8 · Accepted Answer · answered Nov 09 '09 at 14:38

8

Tabinta is a Firefox add-on that lets you do this.

answered Nov 09 '09 at 14:38

invert

4,996
2
22
32

5

Any solution for Chrome? – sorin Mar 16 '12 at 14:47
2

@SorinSbarnea: See my answer – Janus Troelsen Jan 20 '14 at 12:13
1

It's not compatible with Firefox anymore. – rory.ap Nov 05 '18 at 15:02
This is a plugin that works in Firefox 64: https://addons.mozilla.org/en-US/firefox/addon/textarea-tabbing/ – Stefan_Fairphone Jan 09 '19 at 22:21
2

This plugin no longer exists (at no fault of the answer, it has been nearly a decade since the question was answered and Firefox has changed a lot). – aoeu Apr 15 '19 at 13:23
Noted @aoeu. I flagged the answers for deletion as per https://meta.stackexchange.com/a/11706/152063 – invert May 15 '19 at 06:06

score 4 · Answer 7 · edited Sep 27 '16 at 14:33

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.

edited Sep 27 '16 at 14:33

EKons

147
1
2
11

answered Feb 20 '10 at 07:18

Grizly

869
5
9

The link is dead. What's with all this jQuery stuff. There's got to be a way to accept tabs using plain JavaScript. The jQuery plugin is always nice for an already-implemented solution, but it's not really the solution. – Triynko Apr 22 '14 at 22:17
Try this chief: http://stackoverflow.com/a/13130 – Grizly Apr 23 '14 at 02:15

myf · Answer 8 · 2021-12-08T09:32:10.663

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.

edited Dec 08 '21 at 09:32

answered Dec 13 '10 at 15:52

myf

521
4
9

This worked for me. I changed `CapsLock & Tab::` to `^TAB::` so that CTRL+TAB will paste the tab character (instead of switching browser tabs). I am a big fan of AutoHotkey. – Frank Forte Mar 25 '22 at 14:19

score 1 · Answer 9 · answered Nov 09 '09 at 14:52

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.

score 0 · Answer 10 · edited Aug 03 '18 at 21:31

0

or using ahk to insert 4*space in editor:

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

you can see code details explaintation in ahk code

edited Aug 03 '18 at 21:31

doppelgreener

505
1
11
34

answered Feb 05 '17 at 10:28

Lu Zhao

1

score 0 · Answer 11 · edited Feb 08 '15 at 19:51

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

score 0 · Answer 12 · answered May 31 '14 at 00:26

0

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

answered May 31 '14 at 00:26

SiteKickr

1,086
1
8
2

score 0 · Answer 13 · answered Jun 29 '14 at 13:22

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

answered Jun 29 '14 at 13:22

liquid2026

1

Typing the tab character in browser text boxes

13 Answers13

[VB.NET]

[C#]

[VB.NET]

[C#]

Linked

Related