Работа с Textarea jQuery

04.03.2018

53445

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

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

<textarea id="textarea"></textarea>

HTML

Получить содержимое Textarea

$('#textarea').val();

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

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

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

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

Вставить значение в Textarea

$('#textarea').val('Новый текст');

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

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

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

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

Очистить поле

$('#textarea').val('');

Фокусировка

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

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

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

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

// Когда textarea теряет фокус.
$('#textarea').blur(function(){
	alert('Фокус снят');
});

Выделение текста в текстовом поле

$('#textarea').focus(function(){
	$(this).select();
});

Заблокировать и разблокировать

// Заблокировать
$('#textarea').prop('disabled', true);

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

Подсчет количества символов

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

$('#textarea').bind('input', function(){
	$('#result').html($(this).val().length);
});

Подсчет количества строк

$('#textarea').bind('input', function(){
	$('#result').html($(this).val().split('\n').length);
});

Принудительный регистр вводимого текста

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

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

Определить есть ли вертикальный скролл

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

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

$('#textarea').on('input', function(e) {
	if (this.scrollHeight > $(this).innerHeight()) {
		$('#result').html('Есть');
	} else {
		$('#result').html('Нет');
	}
});

Отправить значение textarea через ajax

$('#textarea').bind('input', function(){
	$.ajax({
		url: '/ajax.php', 
		method: 'post',
		dataType: 'html',
		data: {text: $('#textarea').val()},
		success: function(data){
			$('#result').html(data);
		}
	});
});