javascript - 创建具有自动调整大小的文本区域(Creating a textarea with auto-resize)

Question

There was another thread about this , which I've tried.

(关于这一点 ，我尝试了另外一个话题。)

But there is one problem: the textarea doesn't shrink if you delete the content.

(但是有一个问题：如果删除内容， textarea不会缩小。)

I can't find any way to shrink it to the correct size - the clientHeight value comes back as the full size of the textarea , not its contents.

(我找不到将其缩小到正确大小的任何方法clientHeight值以textarea的完整大小而不是其内容的大小返回。)

The code from that page is below:

(该页面上的代码如下：)

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 )
    };
}

  ask by DisgruntledGoat translate from so

Answer 1

A COMPLETE YET SIMPLE SOLUTION(完整而简单的解决方案)

Updated 07/05/2019 (Improved browser support for mobiles and tablets)

(更新于07/05/2019 （改善了对手机和平板电脑的浏览器支持）)

The following code will work:

(以下代码将起作用：)

• On key input.

  (按键输入。)

• With pasted text (right click & ctrl+v).

  (带有粘贴的文本（右键单击和Ctrl + v）。)

• With cut text (right click & ctrl+x).

  (带有剪切文字（右键单击和Ctrl + x）。)

• With pre-loaded text.

  (带有预加载的文本。)

• With all textarea's (multiline textbox's) site wide.

  (在所有textarea （多行文本框）站点范围内。)

• With Firefox (v31-67 tested).

  (使用Firefox （已通过v31-67测试）。)

• With Chrome (v37-74 tested).

  (使用Chrome （已通过v37-74测试）。)

• With IE (v9-v11 tested).

  (使用IE （已测试v9-v11）。)

• With Edge (v14-v18 tested).

  (使用Edge （已测试v14-v18）。)

• With IOS Safari .

  (使用IOS Safari 。)

• With Android Browser .

  (使用Android浏览器 。)

• With JavaScript strict mode .

  (使用JavaScript 严格模式 。)

• Is w3c validated.

  (经过w3c验证。)

• And is streamlined and efficient.

  (并且是精简而高效的。)

---

OPTION 1 (With jQuery)(选项1 （使用jQuery）)

This option requires jQuery and has been tested and is working with 1.7.2 - 3.3.1

(此选项需要的jQuery和已经过测试，并正在与1.7.2 - 3.3.1)

Simple (Add this jquery code to your master script file and forget about it.)

(简单 （将这个jquery代码添加到您的主脚本文件中，然后就不用管它了。）)

 $('textarea').each(function () { this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;'); }).on('input', function () { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This javascript should now add better support for IOS browsers and Android browsers.</textarea> <textarea placeholder="Type, paste, cut text here..."></textarea> 

Test on jsfiddle

(在jsfiddle上测试)

---

OPTION 2 (Pure JavaScript)(选项2 （纯JavaScript）)

Simple (Add this JavaScript to your master script file and forget about it.)

(简单 （将此JavaScript添加到您的主脚本文件中，然后就不用管它了。）)

 var tx = document.getElementsByTagName('textarea'); for (var i = 0; i < tx.length; i++) { tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;'); tx[i].addEventListener("input", OnInput, false); } function OnInput() { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; } 

 <textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea> <textarea placeholder="Type, paste, cut text here..."></textarea> 

Test on jsfiddle

(在jsfiddle上测试)

---

OPTION 3 (jQuery Extension)(选项3 （jQuery扩展）)

Useful if you want to apply further chaining to the textareas you want to be auto-sized.

(如果要对要自动调整大小的文本区域应用进一步的链接，则很有用。)

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ 'height': 'auto', 'overflow-y': 'hidden' })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on('input', function() {
        autoHeight_(this);
      });
    });
  }
});

Invoke with $('textarea').autoHeight()

(用$('textarea').autoHeight()调用)

---

UPDATING TEXTAREA VIA JAVASCRIPT(通过JAVASCRIPT更新文本区域)

When injecting content into a textarea via JavaScript append the following code to invoke the function in option 1.

(通过JavaScript将内容注入文本区域时，请附加以下代码以调用选项1中的函数。)

$('textarea').trigger('input');