13

我想要一个文本区域，它总是与其中的文本一样大。所以页面可以滚动，而在文本区域不能滚动。
这是我到目前为止所做的：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {height: 100%;}
textarea {
border: none;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
line-height: 44px;
font-family:Helvetica;
font-size: 17pt;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background-image:url('linedBack@2x.png');
outline: none;
resize: none;
}
textarea.vert { resize:vertical; }
</style></head><body>
<textarea id="InputTextArea" placeholder="placeholder"></textarea>
</body></html>
4

5 回答 5

15

根据内容行号调整 TeaxArea 的大小。这是一个演示

JS

function resizeTextarea (id) {
  var a = document.getElementById(id);
  a.style.height = 'auto';
  a.style.height = a.scrollHeight+'px';
}

function init() {
  var a = document.getElementsByTagName('textarea');
  for(var i=0,inb=a.length;i<inb;i++) {
     if(a[i].getAttribute('data-resizable')=='true')
      resizeTextarea(a[i].id);
  }
}

addEventListener('DOMContentLoaded', init);

HTML

<textarea id="InputTextArea" placeholder="placeholder" onkeyup="resizeTextarea('InputTextArea')"></textarea>
于 2013-06-24T22:14:55.717 回答
2

如果你使用 AngularJS，你可以这样做：

<textarea ng-keyup="ctl.handleTextAreaHeight($event)"></textarea>

在你的控制器中使用这个：

this.handleTextAreaHeight = function (e) {
  var element = e.target;

  element.style.overflow = 'hidden';
  element.style.height = 0;
  element.style.height = element.scrollHeight + 'px';
};
于 2016-01-28T11:56:38.773 回答
2

如果有人需要 Vue.js 的解决方案。这是一个用于自动调整文本区域大小的 vue 指令。只需全局注册一次指令，您就可以将它用于任何文本区域

Vue.directive('resizable', {
    inserted: function (el) {
        el.addEventListener('input', function(e) {
            e.target.style.height = "auto";
            e.target.style.height = e.target.scrollHeight + 'px';
        });
    }
});

html 很简单，只需将 v-resizable 属性放在 textarea 中即可

<textarea v-resizable></textarea>

特别感谢 AniMir！我正在使用他的输入事件处理程序。

于 2019-09-10T09:58:30.940 回答
1

如果有人仍然需要这个，不管它的价值，这里是我的纯 js。但首先，您可以检查一下： Auto expand a textarea using jQuery

    var textAreas = document.getElementsByTagName('textarea');
    try {
        taLength = textAreas.length;
        for (i=0; i < taLength; i++) {
            var taId = textAreas[i].id;
            document.getElementById(taId).addEventListener('input', function(e) {
                e.target.style.height = "auto";
                    //This makes your textarea back to its original size. So you can replace it with any size you want it to have e.g. "120px"
                    //You may need some logic if you have multiple taxtareas with different original sizes
                e.target.style.height = e.target.scrollHeight+'px';
            });
        }
    }
    catch (err) {
        window.alert(err);
    }

我使用了 shubhra 的答案来构建那个。它很流畅，不会出现滚动条。

于 2019-04-11T11:01:40.823 回答
0

设置时只是设置height = scrollHeight未达到目标box-sizing: border-box。这是一个解决方案，它允许文本区域再次缩小。

// auto resize the textareas
document.querySelectorAll("textarea").forEach(function (el) {
  el.addEventListener("input", function () {
    var cs = window.getComputedStyle(this);
    // reset height to allow textarea to shrink again
    this.style.height = "auto";
    // when "box-sizing: border-box" we need to add vertical border size to scrollHeight
    this.style.height = (this.scrollHeight + parseInt(cs.getPropertyValue("border-top-width")) + parseInt(cs.getPropertyValue("border-bottom-width"))) + "px";
  });
});

// compat window.getComputedStyle: IE9
// compat NodeList.forEach: No IE (but not necessary here)
* { box-sizing: border-box; }
textarea { width: 20%; }
#a { padding: 1em; }
#b { padding: 0; }
#c { max-height: 7em; }
#d {
  border-top: 10px solid blue;
  border-bottom: 10px solid blue;
}
<textarea id="a">1em padding</textarea>
<textarea id="b">0 padding</textarea>
<textarea id="c">max-height: 7em</textarea>
<textarea id="d">10px vertical borders</textarea>

于 2022-02-23T14:03:01.220 回答