Сборник jQuery приёмов с textarea – получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
Во всех примерах используется следующий HTML код:
Получить строчку из 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 используется jQuery метод $.trim()
.
// Добавить текст в начало.
$('#textarea').val($.trim('Текст в начале.' + '\n' + $('#textarea').val()));
// Добавить текст в конец.
$('#textarea').val($.trim($('#textarea').val() + '\n' + 'Текст в конце.'));
Установить фокус
Обработка смены фокуса Textarea
// Событие когда textarea получил фокус.
$('#textarea').focus(function(){
alert('Фокус установлен');
});
// Когда textarea теряет фокус.
$('#textarea').blur(function(){
alert('Фокус снят');
});
// Заблокировать
$('#textarea').prop('disabled', true);
// Разблокировать
$('#textarea').prop('disabled', false);
JS свойство length
возвращает количество символов для строк и количество элементов для массивов. Перенос строки считается как отдельный символ, для символа эмодзи length
возвращает как минимум 2.
$('#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').bind('input', function(){
$.ajax({
url: '/ajax.php',
method: 'post',
dataType: 'html',
data: {text: $('#textarea').val()},
success: function(data){
$('#result').html(data);
}
});
});