如何使用 CSS 强制 textarea 垂直调整大小？

Question

我有一个textarea 元素，我希望它有一个默认高度（例如 340 像素），但可以垂直调整大小到浏览器窗口高度的 70%（当我输入大量文本时，例如 coping &粘贴此问题应使其垂直变大）。

我尝试在 CSS 中设置resize: vertical 参数并使用max-height 如下，但它仍然没有调整大小。

我做错了什么，我该如何解决？

#content {
    position: relative;
    top: 0px;
/*
    max-width: 320px;
*/
    margin: 0 0 0 0;
    line-height: 1.6em;
    z-index: 1;
    height: 100%;
}

#statements {
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-bottom: 0px;
    max-height: 70%;
    background-color: rgba(255, 255, 255, 0);
    max-width: 340px;
    padding-left: 50px;
    z-index: 10;
    overflow: hidden;
/*    pointer-events: none;*/
}

#entryform {
    position: relative;
    background-color: var(--entry-form-background);
    width: 340px;
    border-radius: 8px;
    border-top-left-radius: 0px!important;
    padding-top: 10px;
    height: 100%;
    padding-bottom: 20px;
    padding-left: 10px;
    margin-left: -10px;
    margin-bottom: 0px;
    z-index: 10!important;
    display: block;
}

textarea {
    font: 16px 'IstokWeb-Bold',sans-serif;
    position: relative;
    resize: vertical;
    width: 92%;
    max-height: 100%;
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
    padding: 0.5em 0.6em;
    display: block;
    margin: 0.25em 0;
    border: 1px solid #e6e6e6;
    box-shadow: inset 0 1px 3px #e6e6e6;
    border-radius: 6px;
    -webkit-transition: 0.3s linear border;
    -moz-transition: 0.3s linear border;
    -ms-transition: 0.3s linear border;
    -o-transition: 0.3s linear border;
    transition: 0.3s linear border;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    z-index: 10;
}

<div id='statements'>

  <div id="entryform" class="editorpane">
      
    <div id="edit-panel">
    
    <form action='/post' name='submitform' id="submitform" method='post'>

    <textarea name='entry[body]' id="statement" placeholder='type in some words or #hashtags to see how they connect or copy and paste your notes or text here'></textarea>

            
    <input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary">
          

    </form>
    
    </div>

  </div>
</div>

Answer 1

您可以在keyup 和/或change 上使用带有事件侦听器的javascript，这样当您粘贴文本时，它会将textarea 的高度调整为element.scrollHeight。

let textarea = document.getElementById('textArea');

textarea.addEventListener('change', resizetextArea);
textarea.addEventListener('keyup', resizetextArea);

function resizetextArea(){
  textarea.style.height = `${textarea.scrollHeight}px`;
}

#content {
  position: relative;
  top: 0px;
  /*
    max-width: 320px;
*/
  margin: 0 0 0 0;
  line-height: 1.6em;
  z-index: 1;
  height: 100%;
}

#statements {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding-bottom: 0px;
  max-height: 70%;
  background-color: rgba(255, 255, 255, 0);
  max-width: 340px;
  padding-left: 50px;
  z-index: 10;
  overflow: hidden;
  /*    pointer-events: none;*/
}

#entryform {
  position: relative;
  background-color: var(--entry-form-background);
  width: 340px;
  border-radius: 8px;
  border-top-left-radius: 0px!important;
  padding-top: 10px;
  height: 100%;
  padding-bottom: 20px;
  padding-left: 10px;
  margin-left: -10px;
  margin-bottom: 0px;
  z-index: 10!important;
  display: block;
}

textarea {
  font: 16px 'IstokWeb-Bold', sans-serif;
  position: relative;
  resize: vertical;
  width: 92%;
  max-height: 100%;
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
  padding: 0.5em 0.6em;
  display: block;
  margin: 0.25em 0;
  border: 1px solid #e6e6e6;
  box-shadow: inset 0 1px 3px #e6e6e6;
  border-radius: 6px;
  -webkit-transition: 0.3s linear border;
  -moz-transition: 0.3s linear border;
  -ms-transition: 0.3s linear border;
  -o-transition: 0.3s linear border;
  transition: 0.3s linear border;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  z-index: 10;
}

<p>
  <b>Copy and paste this text:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div id='statements'>

  <div id="entryform" class="editorpane">

    <div id="edit-panel">


      <form action='/post' name='submitform' id="submitform" method='post'>

        <textarea id="textArea" name='entry[body]' id="statement" style="overflow:hidden" placeholder=''></textarea>


        <input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary">


      </form>

    </div>

  </div>
</div>

Answer 2

仅适用于 CSS 解决方案 你最好的选择是contenteditable <div>

div {
  padding: 10px; /* For demo */
  border: 1px solid; /* For demo */
  min-height: 340px; /* Default height 340px */
  max-height: 70%; /* Max height 70% of parent */
  width: 100px; /* For demo */
  position: absolute; /* to stick it in the bottom for demo */
  bottom: 0; /* to stick it in the bottom for demo */
  overflow: auto; /* Becoems scrollable at 70% cap*/
}

<div contenteditable></div>

稍加小心，它应该像文本区域一样启动并运行。

---

注意：请记住，div with contenteditable 绝不是textarea，会有可访问性问题