Php textarea基于内容js或jquery设置高度

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

$text区域文本

• 如果

  $textareatext

  的长度为1行，我希望textarea的高度合适
• 如果是3行、5行或10行……同样的事情

我遇到的问题是在

100px

高度太大，但是如果我将其设置为

20px

并且有10行，则textarea高度太小。 注意：值是通过mysql预加载的。所以我认为它应该计算线数，然后根据多少线设置高度？ 有什么建议吗

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

---

谢谢。

这些可能会有帮助。它们都是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);
}​

下面是弗朗索瓦·瓦尔提供的答案。

<textarea id='myText'></textarea>

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

var obj=document.getElementById（'myText'）；
obj.onkeyup=函数（）{
如果（obj.scrollHeight>obj.offsetHeight）obj.style.height=obj.scrollHeight+'px'；
}

---

我假设用户正在文本区域中键入内容

删除硬编码的高度，并为您的

文本区域

提供一个id:

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

看

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

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

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

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

---

请参见

嘿，以下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
    }

}

window.onload=function（）{
var输入，指数；
输入=document.getElementsByTagName（'textarea'）；
用于（索引=0；索引

多文本区域支持。基于@François的回答

---

要确保所有文本区域跟上其内容，在键入时增加或减少高度，请使用以下命令：

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

---

实际上，将这行代码安装在其上会很有帮助：）

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

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

---

我制作了一个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" ).elasticHeight();

返回此

是为了使其冒泡。。。所以你可以这样做：

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

---

不需要花哨的第三方插件

大多数解决方案要么不增加或减少

textarea

高度，要么在点击“回车”进入下一行时过于仓促，要么在

textarea

高度超出浏览器窗口限制时无法正常工作

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

const textarea=document.querySelector（'textarea'）；
函数更新高度（el）{
el.style.height=''；
el.style.height=el.scrollHeight+'px'；
}
更新高度（文本区域）；
addEventListener（'input'，（）=>UpdateHight（textarea））
Lorem ipsum dolor坐在我的位子上。魁，身份证？奥特·多洛雷姆·南伊斯特。一只小海豹，一只小海豹。拥有的权利必须是平等的。坐在舒适的房间里，你是说你的房间是什么样子的？对于自由流动资金的支付和支付，我认为这是必要的，因为我认为这是必要的。流动资金，临时资金。如果你犯了错误，你会被指控的，你会被指控的！这是一个令人赞叹的错误，因为它是一个不属于丘比特的人，它是一个被称为伊塔克的人！Omnis？
页面加载完成后需要调整大小。变量$textareatext是从数据库中读取的。我知道如何在键入插件后调整其大小that@PaparazzoKid：
$（“#myTArea”）。高度（$（“#myTArea”）[0]。滚动高度-15每次都应该工作。我想你不必自己计算。@FrançoisWahl:我想你是对的。我的数学显然很糟糕。如果福西回来，希望他能交换答案。我会解决这个问题，但是你的代码少了。@PapazzoKid:不用担心，我不担心选择的答案，如果你想用jQuery+scrollHeight更新你的答案，如果可以的话，很酷，这是最重要的：）这很奇怪。我警告textarea值（比如784），警告textarea cols（比如30），进行除法，得到26.1。我用Math.floor把它降到26。应该是对的，不是吗？但它不是，它比它应该的多了5行。无论如何，是的，我会用scrollHeight版本更新答案。谢谢。这个值可能是通过mysql预加载的
$.fn.elasticHeight = function(){
    $( this ).height( 'auto' ).height( $( this )[ 0 ].scrollHeight );
    $( this ).on( "input", function(){
        $( this ).height( 'auto' ).height( $( this )[ 0 ].scrollHeight );
    } );
    return this;
};

$( "textarea" ).elasticHeight();

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

$('.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);
       };
   }
});

.textareaInput {
    min-height:150px;
    padding: 6px 4px;
    overflow-y:hidden;    
}