Работа с Textarea jQuery

Сборник jQuery приёмов с textarea – получить содержимое, вставить значение, подсчет количества символов и строк и т.д.

Во всех примерах используется следующий HTML код:

<textarea id="textarea"></textarea>
HTML
$('#textarea').val();
JS

Получить строчку из Textarea

Метод split() разбивает строку на массив по регулярному выражению, в данном случае по переносу строк. Нумерация индексов массива начинается с 0.

function get_line(value, line){
	var lines = value.split(/[\n\r]+/);
	return lines[line];
}

alert(get_line($('#textarea').val(), 1)); // Выведет значение 2-й строки.
JS
$('#textarea').val('Новый текст');
JS

Добавление строк в начало и конец

Для удаления лишних переносов начале и конце значения textarea используется jQuery метод $.trim().

// Добавить текст в начало.
$('#textarea').val($.trim('Текст в начале.' + '\n' + $('#textarea').val()));

// Добавить текст в конец.
$('#textarea').val($.trim($('#textarea').val() + '\n' + 'Текст в конце.'));
JS
$('#textarea').val('');
JS

Установить фокус

$('#textarea').focus();
JS

Обработка смены фокуса Textarea

// Событие когда textarea получил фокус.
$('#textarea').focus(function(){
	alert('Фокус установлен');
});

// Когда textarea теряет фокус.
$('#textarea').blur(function(){
	alert('Фокус снят');
});
JS
$('#textarea').focus(function(){
	$(this).select();
});
JS
// Заблокировать
$('#textarea').prop('disabled', true);

// Разблокировать
$('#textarea').prop('disabled', false);
JS

JS свойство length возвращает количество символов для строк и количество элементов для массивов. Перенос строки считается как отдельный символ, для символа эмодзи length возвращает как минимум 2.

$('#textarea').bind('input', function(){
	$('#result').html($(this).val().length);
});
JS
$('#textarea').bind('input', function(){
	$('#result').html($(this).val().split('\n').length);
});
JS
// Строчные
$('#textarea-1').bind('input', function(){
	$(this).val($(this).val().toLowerCase());
});

// Заглавные
$('#textarea-2').bind('input', function(){
	$(this).val($(this).val().toUpperCase());
});
JS

Свойство scrollHeight возвращает значение высоты контента в элементе, включая скрытые области из-за прокрутки, а также padding элемента, но не margin.

innerHeight() возвращает высоту элемента без учета границ.

$('#textarea').on('input', function(e) {
	if (this.scrollHeight > $(this).innerHeight()) {
		$('#result').html('Есть');
	} else {
		$('#result').html('Нет');
	}
});
JS
$('#textarea').bind('input', function(){
	$.ajax({
		url: '/ajax.php', 
		method: 'post',
		dataType: 'html',
		data: {text: $('#textarea').val()},
		success: function(data){
			$('#result').html(data);
		}
	});
});
JS
04.03.2018, обновлено 18.10.2019
38552
Предыдущая запись Работа с checkbox в JQuery
Следующая запись Textarea для ввода SMS

Комментарии 2

Александр Максимов Александр Максимов
26 мая 2021 в 15:50
0
Спасибо, как всегда разжевали и показали на примере))
Vanya Yakovlev Vanya Yakovlev
25 июля 2021 в 19:55
0
Получить строчку из Textarea. /[\n\r]+/ замените на /\r|\r\n|\n/. Неправильно выводит строки.

, чтобы добавить комментарий.

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

Работа с select с помощью JQuery
Сборник методов JQuery для работы с выпадающими списками select option с примерами.
146909
+8
Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
32194
+13
Работа с checkbox в JQuery
Сборник приемов JQuery для работы с чекбоксом.
169222
+11
Работа с Radio Button в JQuery
Сборник приемов работы с радиокнопками в JQuery. Рассмотрим на примере группы контролов с одинаковым name=radio.
48088
+6
Очистка данных из форм в PHP
Для предотвращения XSS, SQL-инъекций и других атак, данные полученные из форм нужно чистить. Простое экранирования кавычек не достаточно, нужен комплексный подход по типу данных.
6394
+4
Local Storage и Session Storage в JavaScript
Web Storage API это набор методов, при помощи которых в браузере можно хранить данные в виде пар ключ=значение на...
5815
+3