javascript - 每次用户使用 javascript 在下一行中键入时，有没有办法将 <textarea> 加长一行？

Question

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

我以前看过，但不知道怎么做。

Answer 1

好吧，这是我临时想到的，所以可能存在浏览器兼容性问题。然而，这个概念非常简单。基本上，在每个 keyup 事件中，将换行符附加到 textarea 元素中的当前文本，然后检查 scrollHeight 是否大于 偏移高度。如果是这种情况，请将元素高度设置为等于 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 元素的大小将不会调整。应该是一个微不足道的问题，但我会忽略它以免使事情过于复杂。