Question

在我的一个页面上，我有一个文本区域html标签供用户写入。我希望文本区域下方的内容向下移动，换句话说，我希望文本区域垂直调整大小每行添加到文本区域，并使下面的内容只是相对于文本区域的底部定位。

我希望javascript / jquery有一种方法可以检测单词的换行时间，或者添加新行并基于它来调整文本区域容器的大小。

我的目标是让文本区域下方的内容与文本底部保持相同的距离，无论用户写多少。

文本区域在文本溢出时创建滚动条。

Answer 1

由于我对在网上找到的几种解决方案不太满意，所以这是我的看法。

尊重最小高度，最大高度。通过向高度添加缓冲区（当前为20，可以替换为行高），避免跳转并闪烁滚动条。但是，当达到最大高度时仍会显示滚动条。通过逐步减小textarea高度而不是将其设置为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 2

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

首先下载插件：

步骤1：将“jquery.autoresize.min.js”放在你保存jquery插件的地方。

第2步：以HTML格式链接文件 - ＆gt; <script src="jquery.autosize.min.js" type="text/javascript" ></script>请确保此链接位于您的jquery链接之后，以及您自己的javascript / jquery代码链接之前。

第3步：在您的javascript代码文件中，只需添加$('#containerToBeResized').autosize();

即可

Answer 3

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

this工作样本。

Answer 4

请参阅this Fiddle的this answer。这会根据行数增加textarea的高度。

我认为这就是你所要求的。

复制以下答案中的代码：

<强> 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;
}

根据内容自动调整文本区域大小

4 个答案: