Символ TAB (t) В Текстовом Поле При Нажатии Клавиши TAB

В этом кратком руководстве я объясню, как вставлять символ табуляции t в поле текстового ввода (textarea) при нажатии клавиши TAB. Мы использовать для этого JavaScript код на основе jQuery.

Что такое Символ TAB?

Символ табуляции (Horizontal Tabulation, HT или просто TAB) — это управляющий символ в таблице ASCII, который имеет код 09. Он используется для выравнивания текста в строках. Когда мы используем этот символ, курсор на экране перемещается на следующую позицию табуляции вправо. Обычно такие позиции расположены через каждые 8 пробелов, то есть в колонках 1, 9, 17, 25 и так далее. Символ TAB можно вставить с помощью клавиши Tab ⇆, в большинстве языков программирования он обозначается как t.

Когда я пишу код на своем блоге, мне часто не хватает возможности вставлять символ t с помощью клавиши TAB. Поэтому я решил написать небольшой код, который перехватывает нажатие клавиши TAB и вставляет символ t в текстовое поле в текущей позиции курсора.

Код для Вставки Символа TAB

Ниже представлен код, который добавляет символ t при нажатии на клавишу TAB:

document.addEventListener( 'keydown', function( event ){

if( 'TEXTAREA' !== event.target.tagName ){
    return
}

// если это не клавиша TAB
if( event.code !== 'Tab' ){
    return
}

event.preventDefault()

// Получаем текстовое поле
let textarea     = event.target
let selStart     = textarea.selectionStart
let selEnd       = textarea.selectionEnd
let before       = textarea.value.substring( 0, selStart )
let selection     = textarea.value.substring( selStart, selEnd )
let after        = textarea.value.substr( selEnd )
let selection_new = ''

// Удаляем отступ TAB
if( event.shiftKey ){

    // Исправляем выбор
    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 )
        selection = textarea.value.substring( fixed_selStart, selEnd )
    }

    let once = false
    selection_new = selection.replace( /^(t|[ ]{2,4})/gm, ( mm )=>{
        if( isfix && ! once ){
            once = true // один раз для первой строки
            selStart -= mm.length
        }
        selEnd -= mm.length
        return ''
    })
}
// Добавляем отступ TAB
else {
    selStart++

    // Если есть выделенный текст
    if( selection.trim() ){
        selection_new = selection.replace( /^/gm, ()=>{
            selEnd++
            return 't'
        })
    }
    else {
        selection_new = 't'
        selEnd++
    }
}

textarea.value = before + selection_new + after

// Перемещаем курсор
textarea.setSelectionRange( selStart, selEnd )

} );

Этот код будет работать для всех полей текстового ввода на странице. Если вам нужно добавить функциональность только для конкретного поля, измените условие:

if ('TEXTAREA' !== event.target.tagName)

Установка Ширины Табуляции в CSS

При использовании отступов в коде 8 пробелов — это слишком много. Обычно достаточно 4 пробелов, и это неофициальный стандарт, принятый в текстовых редакторах. Кроме того, язык разметки Markdown использует 4 пробела для выделения кода.

Свойство CSS tab-size позволяет изменить ширину отступа табуляции, установленную с помощью символа табуляции (клавиши Tab). Значение этого свойства должно указывать количество символов. Например, чтобы установить ширину табуляции в 4 символа, нужно задать свойство следующим образом:

pre {
tab-size: 4;
-o-tab-size: 4;
-moz-tab-size: 4;
}

Поддержка этого свойства в браузерах составляет 98% (с префиксами). Единственный браузер, который не поддерживает его — это IE.