JS/jQuery

Работа с Textarea jQuery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фокусировка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Автоизменение высоты Textarea

Самое короткое решение динамической высоты у текстового поля, но не стабильное.

$('#textarea').on('input', function(e) {
    this.style.height = '1px';
    this.style.height = (this.scrollHeight) + 'px'; 
});
#textarea {
    min-height: 54px;
    max-height: 200px; 
}

Второй вариант - плагин Autosize от jackmoore, проект на GitHub.

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

<script src="http://yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script src="/plugins/autosize/dist/autosize.min.js"></script>

<script>
autosize($('#textarea'));
</script>
12

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

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