WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Купить персональные IPV4 и IPV6 прокси

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

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

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

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

jQuery(document).ready(function($){

	// символ \t (табуляция tab) при нажатии tab на клавиатуре при фокусе в textarea в админ-панели
	// ver 2
	$("textarea").keydown(function(event){
		// не кропка tab - выходим
		if( event.keyCode !== 9 )
			return;

		event.preventDefault();

		// Opera, FireFox, Chrome
		var textarea = $(this)[0],
			selStart = textarea.selectionStart,
			selEnd   = textarea.selectionEnd,
			slection = textarea.value.substring( selStart, selEnd ),
			slection_new = '',
			before   = textarea.value.substring( 0, selStart ),
			after    = textarea.value.substring( selEnd, textarea.value.length );

		// добавляем tab
		if( ! event.shiftKey ){
			selStart++;
			if( slection.trim() )
				slection_new = slection.replace(/^/gm, function(){ selEnd++; return "\t"; });
			else {
				slection_new = "\t";
				selEnd++;
			}
		}
		// убриаем табы
		else {
			// если символ до выделения тоже \t удаляем и его
			if( before[ before.length -1 ] === "\t" ){
				before = before.substring( 0, before.length - 1 );
				selStart--;
				selEnd--;
			}

			slection_new = slection.replace(/^\t/gm, function(){ selEnd--; return ""; });
		}

		textarea.value = before + slection_new + after;

		// курсор
		textarea.setSelectionRange( selStart, selEnd );
	});

});

Этот код будет срабатывать для всех textarea на странице, если нужно чтобы было затронуто определенное поле, то укажите его селектор в строке $("textarea"). Для работы кода нужна библиотека jQuery.

Код может не работать в некоторых версиях IE.

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

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

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

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

Для FireFox нужно указывать префикс -moz- для оперы -o-.

Поддержка этого свойства браузерами не полная - точный список:

  • Opera (с версии 10.6);
  • FireFox (4.0);
  • Chrome (21);
  • Safari (6.1).
1 коммент
  • Otshelnik-Fm203 otshelnik-fm.ru

    Спасибо!
    Действительно работает.
    И равно 8 пробелам!
    Возьму на заметку этот код

    Ответить5.6 лет назад #
Здравствуйте, !     Войти . Зарегистрироваться