Символ табуляции (\t) в textarea при нажатии TAB на клавиатуре

Короткая заметка с JS кодом на основе jQuery, который вставляет символ табуляции \t при нажатии на кнопку TAB в поле textarea.

Я описываю функции на этом блоге, и как есть время и хватает знаний, отвечаю на ваши вопросы в комментариях. И в том, и в другом случае, частенько приходится писать коды и очень не хватало возможности вставлять символ \t прямо с клавиатуры, привычной кнопкой TAB. Сегодня решил написать небольшой код, который перехватывает событие нажатия клавиши Tab и вставляет символ \t в поле textarea, в место, где находится курсор.

/**
 * \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 )
} );

Этот код будет срабатывать для всех textarea на странице, если нужно чтобы было затронуто определенное поле, то измените проверку:

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

Указываем длину (ширину) табуляции в CSS

Когда отступы используются в коде, 8 пробелов довольно много - 4-х пробелов вполне достаточно, к тому же это неписаный стандарт, который используется в текстовых редакторах. Да и язык разметки markdown использует 4 пробела, когда речь идет о коде.

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

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

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