javascript - 动态文本区域高度

Question

我确信 textarea 的高度会根据其内容(而不是滚动)而变化。但是默认高度是 32px 而不是 16px 我该如何更改它。

HTML:

<textarea id="cryTextArea" style="background:#fff; border:dashed #bc2122 1px; height:auto; width:100%;"></textarea>

Javascript/jQuery:

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);
  };
}
var firstHeight = 0;
var storeH = 0;
var storeH2 = 0;
function init() {
  var text = document.getElementById('cryTextArea');

  function resize() {
    //console.log(text.scrollHeight);
    text.style.height = 'auto';
    if (storeH != text.scrollHeight) {
      text.style.height = text.scrollHeight + 'px';
      storeH = text.scrollHeight;
      if (storeH2 != storeH) {
        console.log("SENT->" + storeH);
        storeH2 = storeH;
      }
    }
  }
  /* 0-timeout to get the already changed text */
  function delayedResize() {
    window.setTimeout(resize, 0);
  }
  observe(text, 'change', resize);
  observe(text, 'cut', delayedResize);
  observe(text, 'paste', delayedResize);
  observe(text, 'drop', delayedResize);
  observe(text, 'keydown', delayedResize);

  text.focus();
  text.select();
  resize();
}
init();

see fiddle

Answer 1

假设我理解正确，您的文本区域默认显示 2 行，而您只想显示一行。在您的 HTML 中，您可以定义要显示的行数。像这样:

<textarea id="cryTextArea" rows=1 style="background:#fff; border:dashed #bc2122 1px; height:auto; width:100%;"></textarea>