根据内容自动调整文本区域的大小[重复]

Posted 2023-03-06

【中文标题】根据内容自动调整文本区域的大小[重复]

【英文标题】：Automatically resize text area based on content [duplicate]

【发布时间】：2013-10-10 19:03:51

【问题描述】：

在我的一个页面上，我有一个文本区域 html 标记供用户在其中写信。我希望文本区域下方的内容向下移动，或者换句话说，我希望文本区域垂直调整大小添加到文本区域的每一行以及下面的内容只需相对于文本区域的底部进行定位。

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

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

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

【问题讨论】：

插件可以吗？首先点击谷歌：jacklmoore.com/autosize 它是基于 jQuery 的。 - Johannes

【参考方案1】：

由于我对在网络上找到的几种解决方案不太满意，因此我对它的看法如下。

尊重最小高度，最大高度。 通过将缓冲区添加到高度（当前为 20，可以用 line-height 替换）来避免跳跃和闪烁滚动条。但是，当达到最大高度时仍会显示滚动条。 避免通过逐渐减小 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"));

【讨论】：

不错的解决方案。 +1。但我不喜欢这段时间。在我看来更好：function autoheight(a) $(a).height(20); $(a).height($(a).prop('scrollHeight') + 20);

是的，这样会干净很多，不幸的是，当你一次性将高度降低到20时，它会失去其容器（fe body）的滚动位置。

您刚刚回答了这个难题：***.com/questions/29930300/…。我会等你回答，否则我今晚会发布我的。

这个简单的方法对我来说很神奇！

迄今为止我见过的唯一解决方案（包括很多库）不会使滚动条失去它的位置！谢谢！我一直在寻找一种方法来处理这个问题（通过在“1px”高度黑客之前插入一个与 textarea 相同高度的 div）但是你的解决方案（即使它有一个 while 循环）对我来说似乎最干净。

【参考方案2】：

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();

【讨论】：

页面甚至无法在 IE8 中加载。

这尊重min-height和max-height。

【参考方案3】：

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

this 工作样本。

【讨论】：

好主意，但如果一行比 textarea 的宽度长，就不行了。

$(this).val() -> this.value 和 $(this).prop('rows', rows.length) -> this.rows = this.value.split("\n")

jsfiddle.net/Zu5tY/1 这个工作样本。

还是同样的问题imgur.com/uu5WzHV

没有检查句子的宽度。

【参考方案4】：

参见this answer 中的this Fiddle。这会根据行数增加文本区域的高度。

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

从下面的答案复制代码：

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;