Поиск

Обернуть выделенный текст тегами в textarea

С помощью JS-свойств selectionStart и selectionEnd можно сделать оборачивание выделенного текста тегами или BB-кодами. Рассмотрим пример добавления тега <b>:

<a id="button-b" href="#"><b>Жирный</b></a>
<textarea id="control" rows="5">...</textarea>
HTML
$('#button-b').click(function(){
	var control = $('#control')[0];
	var start = control.selectionStart;
	var end = control.selectionEnd;

	if (start != end) {
		var text = $(control).val();
		$(control).val(text.substring(0, start) + '<b>' + text.substring(start, end) + '</b>' + text.substring(end));

		// Ставим каретку в конец добавленного тега.
		$(control).focus();
		var sel = end + 7;
		control.setSelectionRange(sel, sel);
	}
	return false;
});
JS

Результат:

Чтобы не дублировать код для других тегов, лучше написать отдельную функцию.

<a id="button-b" href="#"><b>Жирный</b></a>
<a id="button-i" href="#"><i>Курсив</i></a>
<a id="button-u" href="#"><u>Подчеркнутый</u></a>
<a id="button-s" href="#"><strike>Зачеркнутый</strike></a>
<a id="button-a" href="#">Ссылка</a>

<textarea id="control" rows="5">...</textarea>
HTML
function addTag(open, close) {
	var control = $('#control')[0];
	var start = control.selectionStart;
	var end = control.selectionEnd;
	if (start != end) {
		var text = $(control).val();
		$(control).val(text.substring(0, start) + open + text.substring(start, end) + close + text.substring(end));
		$(control).focus();
		var sel = end + (open + close).length;
		control.setSelectionRange(sel, sel);
	}
	return false;
}

// Жирный
$('#button-b').click(function(){
	return addTag('<b>', '</b>');
});

// Курсив
$('#button-i').click(function(){
	return addTag('<i>', '</i>');
});

// Подчеркнутый
$('#button-u').click(function(){
	return addTag('<u>', '</u>');
});

// Зачеркнутый
$('#button-s').click(function(){
	return addTag('<strike>', '</strike>');
});

// Ссылка
$('#button-a').click(function(){
	return addTag('<a href="' + prompt('Введите адрес', '') + '">', '</a>');
});

// При клике на кнопки не снимаем фокус с textarea.
$('a').on('mousedown', function() {
	return false;
});
JS

Результат:

19.11.2019 147
Предыдущая запись Автомасштаб Яндекс карты
Следующая запись Таблица символов ASCII

Другие публикации

getSelection() возвращает выделенный пользователем текст, за исключением текстовых полей, ​для них используются...
23.10.2019 87
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
04.03.2018 11094
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все...
16.10.2018 3614
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
12.06.2019 4839
Ниже приведён список MIME-заголовков и расширений файлов.
11.07.2019 485
PHP функции для перевода текста, ЧПУ, ссылок и имен файлов в транслит.
24.03.2019 1863