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

Question

我正在尝试制作一个连续包含 2 个单元格的表格，第二个单元格包含 1 行文本区域，以便文本垂直对齐到与第一个单元格中的文本相同的级别： 我注意到 CSS对于 FF 在 Chrome 中失败的效果足够好（实际上，它还取决于浏览器缩放级别），我需要一种一致的方法来实现这一点。

为了提供 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，因此各种填充是依赖于浏览器的。现在，这是我能想到的“修复”这个问题：指定垂直填充和vertical-align单元格，删除padding-toptextarea .. 以下代码段在单独的 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 代码段中也不起作用！对，设置display: block为textarea在 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 处提供了完美的对齐（并且垂直“填充”在顶部和底部是相同的）：

但在我原来的情况下，它并不是那么好：

我很困惑，我还能错过什么？

标签： htmlcssvertical-alignment

Answer 1

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

万岁！

PS 实际上，由于 mytextarea没有border，因此vertical-align: middle;一旦调整高度，就不需要单元格的位和无效垂直填充。

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);

但使用这个建议，我们可以改为：

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));
};

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