Tab Symbol (\t) in Textarea When Pressing TAB Key
A short note with JS code based on jQuery, which inserts the tab symbol \t
when pressing the TAB button in a textarea field.
Horizontal Tabulation (HT, TAB) - a control character in the ASCII table with code 09, used for aligning text in lines. When this symbol is encountered, the terminal moves the cursor to the next tab position to the right. Traditionally, these positions are located every 8 spaces, in columns 1, 9, 17, 25... Entered using the Tab ⇆
key, in many programming languages it is denoted as \t
.
I describe functions on this blog, and when I have time and sufficient knowledge, I answer your questions in the comments. In both cases, I often have to write code and really missed the ability to insert the \t symbol directly from the keyboard, with the familiar TAB key. Today, I decided to write a small code that intercepts the Tab key press event and inserts the \t symbol in the textarea field at the cursor position.
GitHub/** * \t (tab ⇆ tabulation) symbol in textarea when pressing tab on the keyboard. * * Adds initial indentation for selected text when pressing the `Tab` key. * Or removes the initial indentation (4 spaces or TAB) when pressing `Shift + Tab`. * * @Author Kama (wp-kama.ru) * @version 4.3 */ document.addEventListener( 'keydown', function( event ){ if( 'TEXTAREA' !== event.target.tagName ){ return } // not tab if( event.code !== 'Tab' ){ return } event.preventDefault() // Opera, FireFox, Chrome let textarea = event.target let selStart = textarea.selectionStart let selEnd = textarea.selectionEnd let before = textarea.value.substring( 0, selStart ) let slection = textarea.value.substring( selStart, selEnd ) let after = textarea.value.substr( selEnd ) let slection_new = '' // remove TAB indent if( event.shiftKey ){ // fix selection let selectBefore = before.substr( before.lastIndexOf( '\n' ) + 1 ) let isfix = /^\s/.test( selectBefore ) if( isfix ){ let fixed_selStart = selStart - selectBefore.length before = textarea.value.substring( 0, fixed_selStart ) slection = textarea.value.substring( fixed_selStart, selEnd ) } let once = false slection_new = slection.replace( /^(\t|[ ]{2,4})/gm, ( mm )=>{ if( isfix && ! once ){ once = true // do it once - for first line only selStart -= mm.length } selEnd -= mm.length return '' }) } // add TAB indent else { selStart++ // has selection if( slection.trim() ){ slection_new = slection.replace( /^/gm, ()=>{ selEnd++ return '\t' }) } else { slection_new = '\t' selEnd++ } } textarea.value = before + slection_new + after // cursor textarea.setSelectionRange( selStart, selEnd ) } );
This code will work for all textareas on the page. If you need to target a specific field, change the check:
if ('TEXTAREA' !== event.target.tagName)
Specifying Tab Width in CSS
When indents are used in code, 8 spaces is quite a lot - 4 spaces are quite sufficient, and this is an unwritten standard used in text editors. Moreover, the markdown markup language uses 4 spaces when it comes to code.
The CSS property tab-index allows changing the width of the tab indentation set using the tab character (Tab key). The value of the property should specify the number of characters. For example, to change the tab width to 4 characters, the property should be specified as follows:
pre { tab-size: 4; -o-tab-size: 4; -moz-tab-size: 4; }
Browser support for this property is 98% (with prefixes). The only browser that does not support it is IE. For more details on browser support, see here.