加载时调整 TextArea 的大小答案

【问题标题】：Resize TextArea on load加载时调整 TextArea 的大小
【发布时间】：2014-02-17 14:06:37
【问题描述】：

我在尝试调整文本区域大小时遇到问题，我可以在用户输入时进行，但是当他们提交时，它会被放入数据库并放入下面的文本区域并显示为消息留言板，但如果消息超出文本区域的大小，则不会显示我想知道是否有人遇到过这个问题并克服了它。

这是我想出的在打字时调整大小的解决方案，

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

这在我使用它的其他页面的 textarea 上的 keyup 上被调用，但我试图做这样的事情来在它加载时调整大小，但它不起作用，但是当按下一个键或一个键时它确实起作用按钮被点击。

onload="resizeTextarea('commentstext');"

我知道我总是可以让它可滚动或将其放入 div 但如果我在文本中进行换行并将其提交到不会存在的 div 中，div 不会像 textarea 那样格式化文本

【问题讨论】：

看这个：stackoverflow.com/questions/19170083/…
@MirkoGuarnier 乍一看与我已经拥有的非常相似，这如何处理从未键入的数据库加载的数据？

标签： javascript html css textarea

【解决方案1】：

查看我对之前解决方案的修改：http://jsfiddle.net/CbqFv/570/

HTML

<textarea cols="42" rows="1">
1 ...by default, you can write more rows</textarea><br />
<br />
<textarea cols="42" rows="5">
1
2
3
4
5 ...by default, you can write more rows</textarea><br />
<br />
<textarea cols="42" rows="10">
1
2
3
4
5
6
7
8
9
10 ...by default, you can write more rows</textarea>

CSS

textarea {
  border: 1px solid gray;
  border-radius: 3px;
  line-height: 1.3em;
  overflow: hidden;
  padding: 0.3em 0.3em 0 0.3em;
  outline: none;
  background-color: white;
  resize: none;
}

JavaScript

var observe;
if (window.attachEvent) {
  observe = function (element, event, handler) {
    element.attachEvent('on'+event, handler);
  };
}
else {
  observe = function (element, event, handler) {
    element.addEventListener(event, handler, false);
  };
}
function init () {
  function resize (element) {
    element.style.height = 'auto';
    element.style.height = element.scrollHeight+'px';
  }
  /* 0-timeout to get the already changed text */
  function delayedResize (element) {
    window.setTimeout(function() { resize(element) }, 0);
  }
  var textareas = document.getElementsByTagName("textarea");
  for (i = 0; i < textareas.length; i++) {
    var textarea = textareas[i];
    observe(textarea, 'change', function() { resize(this) });
    observe(textarea, 'cut', function() { delayedResize(this) });
    observe(textarea, 'paste', function() { delayedResize(this) });
    observe(textarea, 'drop',function() { delayedResize(this) });
    observe(textarea, 'keydown', function() { delayedResize(this) });
    textarea.focus();
    textarea.select();
    resize(textarea);
  }
}

init();

【讨论】：

【解决方案2】：

来自autosize 文档：

Autosize 无法知道 textarea 的值何时通过 JavaScript 更改。如果你这样做，触发 autosize.resize 事件后立即更新高度。示例：

$('#example').val('新文本！').trigger('autosize.resize');

所以在你更新 textarea 内容后，你必须调用那个触发器来自动调整它的大小

【讨论】：