2

这是我的代码：（保持简单）

<textarea style="height:100px;">
    $textareatext
</textarea>
  • 如果$textareatext是 1 行长我希望 textarea 的高度适合
  • 如果它是 3、5 或 10 行......同样的事情。

我遇到的问题是100px高度太大，但是如果我将它设置为20px并且有 10 行，那么 textarea 高度太小了。注意：值是通过 mysql 预加载的。所以我认为它应该计算行数，然后根据行数设置高度？有什么建议么？

我使用 Javascript 和 jQuery，或者任何你建议的东西。

谢谢你。

4

10 回答 10

10

这些可能会有所帮助。它们都是 jQuery 插件。

编辑

var $textArea = $("#textarea-container");

resizeTextArea($textArea);

$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}​

这个答案由下面的 François Wahl 提供。

于 2012-07-28T06:51:38.960 回答
9

删除硬编码的高度并给你textarea一个 id：

<textarea id="textarea-container">
    Line 1
    Line 2
    Line 3
    Line 4
</textarea>​

使用 jQuery，您可以使用以下内容在页面加载时自动调整大小，然后在keuUp前面提到的事件上自动调整大小。

var $textArea = $("#textarea-container");

// Re-size to fit initial content as it is pre-loaded.
resizeTextArea($textArea);

// Remove this binding if you don't want to re-size on typing.
$textArea.off("keyup.textarea").on("keyup.textarea", function() {
    resizeTextArea($(this));
});

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}​

见演示

或者，如果您只关心显示它并删除默认行填充，请使用以下命令：

var $textArea = $("#textarea-container");
var nativeRowPadding = 15;

// Re-size to fit initial content.
resizeTextArea($textArea);

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight-nativeRowPadding );
}​

见演示

于 2012-07-28T07:26:16.710 回答
5

要确保所有文本区域都跟上它们的内容，在您键入时增加或减少高度，请使用以下内容：

$("textarea").on("input",function(){
   $(this).height("auto").height($(this)[0].scrollHeight);
}

在 SO 本身上安装这行代码实际上会有所帮助:)

于 2014-03-21T15:41:24.187 回答
1

嘿，只有以下 5 行代码完成了预加载文本区域的工作

window.onload= function(){

    var inputs, index;

    inputs = document.getElementsByTagName('textarea');

    for (index = 0; index < inputs.length; ++index) 
    {
    inputs[index].style.height=inputs[index].scrollHeight + 5
    }

}
于 2012-08-25T19:46:26.577 回答
1

多个文本区域支持。基于@François 的回答。演示小提琴

if ($(".textarea").length > 0) {
    $(".textarea").each(function () {
        resizeTextArea($(this));
        $(this).off("keyup.textarea").on("keyup.textarea", function () {
            resizeTextArea($(this));
        });
    });
}

function resizeTextArea($element) {
    $element.height($element[0].scrollHeight);
}
于 2013-10-16T08:55:35.637 回答
1

我做了一个我经常使用的 OOP 解决方案：

$.fn.elasticHeight = function(){
    $( this ).height( 'auto' ).height( $( this )[ 0 ].scrollHeight );
    $( this ).on( "input", function(){
        $( this ).height( 'auto' ).height( $( this )[ 0 ].scrollHeight );
    } );
    return this;
};

然后您只需将 elasticHeight 添加到您的 textarea 中，如下所示：

$( "textarea" ).elasticHeight();

这return this是为了让它起泡......所以你可以这样做：

$( "textarea" ).elasticHeight().val( "default value" );

不需要花哨的 3rd 方插件...

于 2015-12-06T05:11:33.460 回答
0 
<textarea id='myText'></textarea>

var obj=document.getElementById('myText');
obj.onkeyup=function(){
if(obj.scrollHeight>obj.offsetHeight)obj.style.height=obj.scrollHeight+'px';
}

我认为用户正在输入文本区域

于 2012-07-28T07:03:12.440 回答
0

当您在 textarea 中删除行时，François Wahl 接受的代码不起作用 - 高度保持不变。确保在获取它的 scrollHeight 之前将 textarea 的高度设置为“auto”：

function resizeTextArea($element) {
    $element.height("auto");
    $element.height($element[0].scrollHeight);
}
于 2015-05-26T20:46:18.610 回答
0

大多数解决方案要么不增加和减少textarea高度，要么在您按“Enter”进入下一行时过于跳跃，或者当textarea高度超出浏览器窗口限制时它们无法正常工作。

这是我的（Firefox、Chrome、Safari、Opera）：

$('.textareaInput').on('input', function(e) {
   if ($(this).outerHeight() > 162) {
       while($(this).outerHeight() < this.scrollHeight) {
           $(this).height($(this).height()+1);
       };

       while($(this).outerHeight() > this.scrollHeight) {
           $(this).height($(this).height()-1);
       };   

   } else {
       while($(this).outerHeight() < this.scrollHeight) {
           if ($(this).height())
           $(this).height($(this).height()+1);
       };
   }
});

... 其中 162 = 150（最小高度）+ 6（顶部填充）+ 6（底部填充）：

.textareaInput {
    min-height:150px;
    padding: 6px 4px;
    overflow-y:hidden;    
}
于 2018-05-07T01:01:59.023 回答
0 

const textarea = document.querySelector('textarea');

function updateHeight(el) {
  el.style.height = '';
  el.style.height = el.scrollHeight + 'px';
}

updateHeight(textarea);

textarea.addEventListener('input', () => updateHeight(textarea));
<textarea>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, id? Aut dolorem nam iste. Asperiores minima nemo porro autem quidem. Quae quas dolore possimus sunt vitae quo ea incidunt. Sit repellendus at consequuntur fugiat quos, quisquam atque dolorem ipsa autem iure quod? Expedita eius cum asperiores obcaecati eaque laudantium libero aliquid ex doloremque modi incidunt, officiis velit reiciendis cupiditate necessitatibus harum quod repellendus officia quidem. Aliquid, temporibus. Nihil error cumque labore eius voluptas commodi accusamus eaque distinctio, facere dolores! Laudantium distinctio a quisquam quibusdam error nam quia ex cupiditate, fuga saepe maiores cumque enim corporis alias itaque recusandae vel! Omnis?</textarea>

于 2021-02-04T15:43:55.033 回答