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

Question

我有一个 textarea 元素，我希望它具有默认高度（例如 340 像素），但垂直方向可调整为浏览器 window 高度的 70%（当我输入了很多文本，例如复制和粘贴这个问题应该会使它垂直变大）。

我尝试在 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

您可以将 javascript 与 keyup and/or change 上的事件侦听器一起使用，这样当您粘贴文本时，它会将文本区域的高度调整为 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，会有可访问性问题

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

How to force textarea to be vertically resizeable using CSS?

css

textarea

resize

autoresize