当空/有文本时，textarea中插入符号的不同位置

Question

我对<textarea>有疑问。插入物中的插入物具有不同的垂直位置，基于它何时为空：

我的代码：

textarea {
    padding: 0 5px;
    border: none;
    outline: none;
    overflow: hidden;
    height: 30px;
    vertical-align: middle;
    line-height: 26px;
    white-space: pre-wrap;
    outline: 1px solid red;
}

演示： http://jsfiddle.net/oapbghfs/

Answer 1

这会使您的文字对齐：

textarea {
    padding: 5px;
    border: none;
    overflow: hidden;
    vertical-align: middle;
    white-space: pre-wrap;
    outline: 1px solid red;
}

它是一个文本区域，默认情况下有两行。

15px的高度会使它看起来像一行，然后你可以用JS删除并调整该区域的大小。

Answer 2

这是因为你的行高设置为26px。

我认为除了填充之外，没有任何方法可以设置起始插入位置，但是如果你的线高需要那么大，你会遇到同样的跳跃问题。如果需要文本区域，您可以尝试使用:invalid伪选择器来定位空文本区域并调整顶部填充以获得所需位置。

此外，你的边境地区也会集中注意力。这是因为您使用轮廓设置红色边框。不确定这是否是所需效果，但使用边框会使焦点不受限制。

Answer 3

如果删除行高样式，则插入符号将保持一致。