Style extension for Tab Override
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Style extension for Tab Override 4.0+

This extension adds tabOverrideEnabled and tabOverrideActive CSS classes to textarea elements when Tab Override is enabled and active.


When using delegated events with the jQuery plugin, the class is applied to the container element. Therefore, to account for both behaviors, CSS selectors should be written similar to the following:

.tabOverrideActive textarea {
    /* declarations */

Note: The focus psuedo class is used in the example, but is not supported by IE 6 or 7.


The extension is enabled by default.

// get the current setting
var styleEnabled =;
// enable the extension; // default
// disable the extension;

Get/Set Enabled Class

var enabledClass =;'tabOverrideEnabled'); // default

Get/Set Active Class

var activeClass =;'tabOverrideActive'); // default

Get/Set Hard Tab Size

Hard tabs are enabled by setting the (soft) tab size to 0:

// use hard tabs
var hardTabSize =;; // default

Note: Adjusting the hard tab size is not supported by all browsers. See this compatibility table for more details.


setStyle - Called when the style extension is enabled or disabled


  • enable - whether the style extension was enabled or disabled


tabOverride.addExtension('setStyle', function (enable) {
    if (enable) {
        // the style extension was enabled
    } else {
        // the style extension was disabled

Utility Properties


This boolean property indicates whether changing the display size of hard tabs is supported in the current browser. It can be accessed under the utils namespace:

Utility Methods

// this textarea variable is used in the following examples
var textarea = document.getElementById('txt');

addEnabledClass / addActiveClass;;

removeEnabledClass / removeActiveClass;;

updateEnabledClass / updateActiveClass

// update/replace the class for all textareas'newEnabledClass');'newActiveClass');
// remove the class for all textareas;;


// add an extra CSS selector for the hard tab size rule
// ".(enabledClass)" and ".(activeClass)" will be replaced with the current
// enabled or active class'.(enabledClass) textarea');


// remove an extra CSS selector for the hard tab size rule'.(enabledClass) textarea');

Note: These methods will not add the same class to an element more than once.