自动调整大小的textarea元素底部会出现其他空格

Question

我有一个textarea，我添加了一个onChange侦听器，以便在需要换行（或不再需要换行）时更新字段的高度。我遇到的问题是，当光标接近textarea的（当前）最后一行的末尾时，将创建实际上不“存在”的其他空格（即它不包含任何字符-有点“空”行”。

我的描述可能不足以解释我遇到的问题，但是可以在下面的JSFiddle中观察到相同的效果（我为自己的表单使用了相同的实现）：

https://jsfiddle.net/d9fqaest/

如您所见，到达第一行的末尾时，将添加新行而不会出现问题：

但是，当到达第二行（或随后的任何行）的末尾时，添加新的“空”行太早了（随后的任何行在添加错误的行之前需要越来越少的字符）：

我怀疑问题出在行计数的计算方式中：

handleChange(e) {
    const oldRows = e.target.rows;
    e.target.rows = 1;
    const newRows = ~~(e.target.scrollHeight/lineHeight);

    if (newRows === oldRows) {
        e.target.rows = newRows;
    }

    this.setState({
        value: e.target.value,
        rows: newRows
    });
}

我在这里尝试了几种不同的逻辑流程，包括简单地将元素的height设置为其scrollHeight，但是我无法产生所需的行为（上述方法有些可以，但是我无法弄清楚在删除文本后如何删除行）。我知道有几个外部库可以解决此问题，但我想尽可能避免使用这些库。

谢谢！

Answer 1

因此，事实证明，所需要做的只是在文本区域上使用overflow-y: hidden，以防止滚动条包含在高度计算中。简单修复！