Question

每次用户进入<textarea>中显示的最后一行时，我都希望增加一行<textarea>。这可能吗？

我之前看过它，但无法弄清楚如何做到这一点。

Answer 1

好的，我刚刚创建了这个，所以可能存在浏览器兼容性问题。然而，这个概念非常简单。基本上，在每个keyup事件中，在textarea元素的当前文字后附加换行符，然后检查scrollHeight是否大于offsetHeight。如果是这种情况，请将元素高度设置为等于scrollHeight。完成所有这些后，删除附加的换行符。假设您的textarea元素的ID为ta：

编辑 - 好吧，我的原创想法导致光标位置跳到文本的末尾，即使用户将光标向后移动也不好。我想出的修复包括创建一个文本区域的隐形克隆，并在该区域中插入额外的换行符，以免干扰可见区域中的光标位置。不确定我对这种方法感到满意，但它现在有效。如果有更好的方法，我会很高兴听到它。这是更新后的代码：

var shadow = document.createElement('textarea');
shadow.className = 'autosize';
shadow.style.visibility = 'hidden';

document.getElementById('ta').onkeyup = function() {

  this.parentNode.appendChild(shadow);
  shadow.value = this.value + '\n';

  if (shadow.scrollHeight > shadow.offsetHeight) {
    this.style.height = shadow.scrollHeight + 'px';
  }

  this.parentNode.removeChild(shadow);

};

更新后的测试http://jsfiddle.net/7wezW/1/

现在回到你的常规节目......

在Chrome中运行良好，如果有人在其他浏览器中指出问题，我会尝试解决它们。

PS，我应该指出，如果用户只使用鼠标粘贴文本，则textarea元素的大小将不会调整。应该是一个微不足道的问题，但我会把它留下来，不要过分复杂化。

Answer 2

http://webdesign.torn.be/tutorials/javascript/prototype/auto-expand-contract-textarea/有代码和演示。

还有一个不使用框架的非IE6版本： http://scrivna.com/blog/2008/04/12/javascript-expanding-textareas/

Answer 3

是的，有很多JQuery插件，比如这个插件附带一个演示：http://james.padolsey.com/javascript/jquery-plugin-autoresize/

在最大高度，缓冲空间等方面非常可定制

每次用户使用javascript键入下一行时，有没有办法将<textarea>延长一行？</textarea>

3 个答案: