Celeb Spill Daily

Home / general

Typing the tab character in browser text boxes

Alexander Torres |

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?

13 Answers

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

6

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

10

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

1

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

3

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!

2

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.

If it's your site:

jQuery plugin: 

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.

2

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.

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.

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

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

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:

or using ahk to insert 4*space in editor:

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

you can see code details explaintation in ahk code

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

You Might Also Like