Символ табуляції (t) в textarea при натисканні TAB на клавіатурі

Коротка нотатка з JS-кодом на основі jQuery, який вставляє символ табуляції tпри натисканні на кнопку TAB у полі textarea.

Я описую функції на цьому блозі, і як час і вистачає знань, відповідаю на ваші запитання в коментарях. І в тому, і в іншому випадку, часто доводиться писати коди і дуже не вистачало можливості вставляти символ прямо з клавіатури, звичною кнопкою TAB. Сьогодні вирішив написати невеликий код, який перехоплює подію натискання клавіші Tab і вставляє символ в поле textarea, в місце, де знаходиться курсор.

/**
 * Символ t (tab ⇆ табуляція) в textarea при натисканні tab на клавіатурі.
 *
 * Додає початкові відсутпи для виділеного тексту при натисканні на клавішу `Tab`.
 * Або прибирає початковий відступ (4 пробіли або TAB) при натисканні на `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 - для першої лінії тільки
				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;
}

Підтримка цієї якості браузерами 96% (з префіксами). Не підтримує лише IE. Докладніше про підтримку дивіться тут .