如何像Facebook一样，通过键入或按Shift和Enter键来自动调整输入字段的垂直和水平大小

Question

我发现了许多允许垂直调整文本区域大小的插件和其他允许水平调整输入字段大小的插件，但我还没有找到一个允许像Facebook的评论系统那样垂直调整输入字段大小的插件

当文本到达输入的末尾时，我如何垂直调整输入字段的大小，以便文本可以像Facebook的评论系统一样转到下一行？当按下shift和enter键时，如何像在Facebook上一样调整文本大小？

Answer 1

如前所述：<输入类型＝"；文本"/>

如果你读了Sté的第三个答案。他介绍了如何实现多行输入框。

"通过赋予文本break:break-word；属性，可以使文本输入多行。"

然后在评论中有一个指向功能小提琴的链接，概述了一个可以使用的简单实现。Jeremy Wadhams Fiddle

CSS：

input {
  width: 50px;
  height: 50px;  
  white-space: pre;
  word-break: break-word; 
}

HTML:

 <input type="text" name="a" id="a" value="bla bla bla bla bla" />

JS:

document.getElementById('a').value = 'Am I n on a new line?';

Answer 2

这似乎运行得相当好。使用文本区域，您可以指定它所具有的行和列的数量，然后使用jQuery操作这些行和列。

<!-- Looks identical to a text input -->
<textarea cols="1"></textarea>

现在，每次释放密钥时，每键入20个字符就会添加一个新行。

$('textarea').keyup(function() {
    var rows = $(this).attr('rows'),
        cols = $(this).attr('cols') || 20, // The number of cols is 20 by default
        length = $(this).val().length;
    // After 20 characters are typed, add a new row to the textarea
    if (length % cols === 0) {
      $(this).attr('rows', ++rows);
    }
});

Answer 3

按键时，将文本区域的高度设置为其scrollHeight，如下所示：

input.onkeydown = function() {
    input.style.height = input.scrollHeight + "px";
}

滚动高度始终是内容的高度，因此这将使文本区域扩展到其内容。

演示

更新：显然，webkit将scrollHeight计算为包含元素的高度加4px。您可以在每次计算（演示）中从scrollHeight中减去4px，但这不会导致删除文本时框缩小。