将 textarea 中的文本垂直对齐到普通文本

Question

我正在尝试制作一个 table，其中包含连续 2 个单元格，第二个单元格包含 1 行文本区域，以便文本垂直对齐到与第一个文本相同的水平细胞：我注意到 CSS 对于 FF 来说效果很好，但在 Chrome 中失败了（实际上，它也取决于浏览器的缩放级别），我需要一个 consistent 实现这个的方法。

为了给 MCVE，我创建了这个 html:

td, td textarea {
 font-family: serif;
 font-size: 15px;
}
table, tr, td, textarea {
 border: none;
}
td {
 padding-left: 0.5em;
 padding-right: 0.5em;
}

<table><tbody><tr>
    <td>text</td>
    <td><textarea>editable text</textarea></td>
</tr></tbody></table>

<script>
// in the real case, this code is inside a handler of the input event
// which is meant to adjust height when the number of lines is changed
var txt = document.querySelector('textarea');
txt.style.height = '1px';
txt.style.height = txt.scrollHeight+'px';
</script>

如您所见，它并没有完全按预期工作，但也没有那么多 CSS 因此各种填充取决于浏览器。现在，这是我能想到的"fix"：为单元格指定垂直填充和vertical-align，为textarea删除padding-top。下面的代码片段在单独的html:

td, td textarea {
 font-family: serif;
 font-size: 15px;
}
table, tr, td, textarea {
 border: none;
}
td {
 padding: 0 0.5em;
 vertical-align: middle;
}
textarea {
 padding: 0;
}

<table><tbody><tr>
    <td>text</td>
    <td><textarea>editable text</textarea></td>
</tr></tbody></table>

<script>
// in the real case, this code is inside a handler of the input event
// which is meant to adjust height when the number of lines is changed
var txt = document.querySelector('textarea');
txt.style.height = '1px';
txt.style.height = txt.scrollHeight+'px';
</script>

..但它在我的初始上下文中不起作用，而且它在 SO 片段中也不起作用！对，为 textarea 设置 display: block 在 SO 代码段中修复了此问题：

td, td textarea {
 font-family: serif;
 font-size: 15px;
}
table, tr, td, textarea {
 border: none;
}
td {
 padding: 0 0.5em;
 vertical-align: middle;
}
textarea {
 padding: 0;
 display: block;
}

<table><tbody><tr>
    <td>text</td>
    <td><textarea>editable text</textarea></td>
</tr></tbody></table>

<script>
// in the real case, this code is inside a handler of the input event
// which is meant to adjust height when the number of lines is changed
var txt = document.querySelector('textarea');
txt.style.height = '1px';
txt.style.height = txt.scrollHeight+'px';
</script>

但还是！这在 SO 处给出了完美对齐（并且垂直 "padding" 在顶部和底部相同）：

但在我原来的上下文中它并不是那么好:

我很纳闷，我还能缺少什么？

Answer 1

好的，写这篇文章帮助我专注于我尝试过的和没有尝试过的。经过几次迭代（您可以在上面看到）后，我制作了另一个屏幕截图并为此在 textarea 中编辑了文本。 textarea 的高度得到了调整......仅此而已：唯一缺少的部分是 textarea 的 height 应该等于它的 scrollHeight，之后对齐是完美的：

万岁！

PS 实际上，因为我的 textarea 没有 border，一旦高度为已调整。

PPS 更好的是：不是取消填充（我在悬停时使用着色背景，所以零填充看起来不太好），可以改进 input 处理程序以采用填充考虑到：我的初始处理程序是

var adjustHeightToContent = function()
{
    var defaultHeight = 10;
    var maxHeight = 150;
    jQuery(this).height(defaultHeight); // needed to descrease the height
    jQuery(this).height(Math.min(this.scrollHeight , maxHeight));
};
jQuery('.dataEditor').on('input',adjustHeightToContent);

但使用 this suggestion 我们可以改为：

var adjustHeightToContent = function()
{
    var defaultHeight = 10,
        maxHeight = 150;
    // take padding into account:
    var computedStyle = window.getComputedStyle(this, null),
        paddingTop = computedStyle.getPropertyValue('padding-top'),
        paddingBottom = computedStyle.getPropertyValue('padding-bottom'),
        padding = parseFloat(paddingTop) + parseFloat(paddingBottom);

    jQuery(this).height(defaultHeight); // needed to descrease the height
    var effectiveHeight = this.scrollHeight - padding;
    jQuery(this).height(Math.min(effectiveHeight, maxHeight));
};

有了这个，也可以使用非零填充。

将 textarea 中的文本垂直对齐到普通文本

Align vertically text in textarea to the normal text

html

css

vertical-alignment