时间戳

首页 > 解决方案 > 根据内容的大小扩展文本区域

html - 根据内容的大小扩展文本区域

问题描述

textarea {
    height: 1.5em;
    width: 80%;
    padding: 2px;
    transition: all 0.2s ease;
}

textarea:focus {
    height: 100%;
    width: 100%;
}
<table>
  <tr>
    <td>
      <textarea readonly>expand table when clicked to show all data contained herein
      </textarea>
    </td>
  </tr>
</table>

有没有办法通过 CSS 和/或 jQuery 根据其内容调整 html 文本区域的大小？具体来说，我希望文本区域在被单击时展开，以便显示其全部内容。

该片段显示了我到目前为止所拥有的内容。单击时文本区域会扩展，但会扩展为任意预先确定的大小。我希望大小取决于当时文本区域中发生的情况（它是从数据库加载的）。

我已经看到了一些随着用户输入大小而扩大的例子。但这有点不同，因为 textarea 设置为readonly。

标签： htmljquerycss

解决方案

我可以提供这个解决方案。使用scrollHeight. 此外，您需要设置overflow: hidden取消textarea滚动条的规则。

window.onload = function() {
  let textarea = document.querySelector('textarea');
  textarea.onclick = function() {
    this.style.height = (this.scrollHeight > this.clientHeight) ? (this.scrollHeight) + 'px' : "1.5em";
  }
}
textarea {
  width: 80%;
  height: 1.5em;
  padding: 2px;
  transition: all 0.2s ease;
  overflow: hidden;
}
<table>
  <tr>
    <td>
      <textarea readonly>expand table when clicked to show all data contained herein
      </textarea>
    </td>
  </tr>
</table>

推荐阅读