当空/有文本时，文本区域中插入符号的不同位置答案

【问题标题】：different position of caret in textarea when empty / have text当空/有文本时，文本区域中插入符号的不同位置
【发布时间】：2014-10-16 14:38:49
【问题描述】：

<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/

【问题讨论】：

为什么不使用文本字段而不是文本区域？另外，仅供参考，您已经声明了两次大纲。
这只是这个文本区域的基本高度。我有 JS，当用户输入它时它会变得更大。

标签： html css google-chrome textarea

【解决方案1】：

这会使您的文本对齐：

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

这是一个文本区域，默认有两行。

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

【讨论】：

【解决方案2】：

这是因为您将行高设置为 26px。

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

现在，您的边界也限制在焦点上。那是因为您正在使用轮廓来设置红色边框。不确定这是否是所需的效果，但使用边框代替它不会限制焦点。

【讨论】：

【解决方案3】：

如果您删除 line-height 样式，插入符号将变得一致。

【讨论】：

那么如何垂直居中呢？
你愿意改变高度吗？高度：18px;