Автоматически изменять размер текстовой области в зависимости от содержимого

Question

На одной из моих страниц у меня есть html-тег текстовой области, в который пользователи могут писать буквы. Я хочу, чтобы содержимое под текстовой областью сдвигалось вниз, или, другими словами, я хочу, чтобы размер текстовой области изменялся по вертикали с добавлением каждой строки к текстовой области и чтобы содержимое ниже просто располагалось по отношению к нижней части текстовой области.

Я надеюсь, что в javascript/jquery есть способ определить, когда переносятся слова, или когда добавляется новая строка, и на основе этого происходит изменение размера контейнера текстовой области.

Моя цель - сделать так, чтобы содержимое под текстовой областью оставалось на одном и том же расстоянии от нижней части текста независимо от того, сколько пишет пользователь.

Текстовая область создает полосу прокрутки при переполнении текста.

Answer 1

http://www.jacklmoore.com/autosize/

Сначала загрузите плагин:

Шаг 1: Поместите "jquery.autoresize.min.js", где вы храните свои плагины jquery.

Шаг 2. Ссылка на файл в HTML -> <script src="jquery.autosize.min.js" type="text/javascript" ></script> Убедитесь, что эта ссылка идет после вашей ссылки jquery и до ваших собственных ссылок кода javascript/jquery.

Шаг 3: В ваш файл кода JavaScript просто добавьте $('#containerToBeResized').autosize();

Answer 2

Так как я не был слишком доволен несколькими решениями, которые я нашел в сети, вот мое мнение.

Уважает минимальную высоту, максимальную высоту. Избегает прыгать вокруг и мигать полосу прокрутки, добавляя буфер к высоте (в настоящее время 20, может заменить на высоту строки). Однако все еще показывает полосу прокрутки при достижении максимальной высоты. Позволяет избежать сброса положения прокрутки контейнера путем постепенного уменьшения высоты текстовой области вместо установки ее на 0. Таким образом, также удаляются все удаленные строки сразу. Работает в IE и Chrome без перехвата браузера.

http://jsfiddle.net/Nd6B3/4/

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

#ta {
    width:250px;
    min-height:116px;
    max-height:300px;
    resize:none;
}

$("#ta").keyup(function (e) {
    autoheight(this);
});

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight') + 20);
}

autoheight($("#ta"));

Answer 3

$('textarea').keyup(function (e) {
    var rows = $(this).val().split("\n");
    $(this).prop('rows', rows.length);
});

этот образец работы.

Answer 4

Посмотрите эту скрипку из этого ответа. Это увеличивает высоту текстовой области в зависимости от количества строк.

Я думаю, это то, что вы просите.

Скопировал код из ответа ниже:

HTML

<p>Code explanation: <a href="http://www.impressivewebs.com/textarea-auto-resize/">Textarea Auto Resize</a></p>

<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>

JS

/*global document:false, $:false */
var txt = $('#comments'),
    hiddenDiv = $(document.createElement('div')),
    content = null;

txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');

$('body').append(hiddenDiv);

txt.on('keyup', function () {

    content = $(this).val();

    content = content.replace(/\n/g, '<br>');
    hiddenDiv.html(content + '<br class="lbr">');

    $(this).css('height', hiddenDiv.height());

});

CSS

body {
     margin: 20px;
}

p {
    margin-bottom: 14px;
}

textarea {
    color: #444;
    padding: 5px;
}

.txtstuff {
    resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
    overflow: hidden;
}

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}

/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    overflow: hidden;
}

.lbr {
    line-height: 3px;
}