如何从文本区域的垂直中间开始输入答案

【问题标题】：How to begin typing from vertical middle of textarea如何从文本区域的垂直中间开始输入
【发布时间】：2014-01-03 08:59:55
【问题描述】：

我有一个文本区域，像这样

<textarea rows="10" cols="50"></textarea>

默认情况下，光标将从文本区域的左上角开始，但我希望它从文本区域的垂直和水平中心开始，就像在表格单元格中对齐到中间的文本一样。

我通过text-align:center实现了水平居中，但是如何让它垂直居中呢？

类似这样的：

如果输入更多的文字应该是这样的。

我试过这个 CSS：

textarea {
    vertical-align:middle;
    text-align:center;
    display:table-cell;
}

【问题讨论】：

到达下一行时会发生什么？输入的文字应该向上还是向下？
我不认为这是可能的，但this question 可能会给你一些解决办法
@epoch 整个输入的文本应该垂直居中
对不起，如果我在这方面很愚蠢，但这没有意义，那么填充顶部和底部不会达到完全相同的效果吗？请参阅以下内容：jsfiddle.net/gy5Cf/1
@epoch padding-bottom 在我们输入更多文本时不会将文本推到顶部

标签： html css textarea

【解决方案1】：

我想不出只使用<textarea> 的方法，但我有一个demo，几乎可以使用contenteditable <div>。从那篇文章：

浏览器对 contenteditable 的支持出奇的好

我看到的唯一问题是当文本填充<div> 扩展的垂直空间时。我想不出任何方法来阻止CSS 中的这种情况（我尝试了许多不同的属性！）。应该可以在 JavaScript 中拦截它并停止 <div> 扩展。

HTML

<div contenteditable="true"></div>

CSS

div {
    height:150px;
    width:350px;
    border:1px solid black;
    vertical-align:middle;
    text-align:center;
    display:table-cell;
}

【讨论】：

似乎是实现这种情况的更好方法。需要检查我的<form> 是否可以将其与其他表单元素一起提交。
您可能需要将文本复制到隐藏的<textarea> 以作为<form> 的一部分提交
所以，我认为这对我有用，谢谢 :-)

【解决方案2】：

你必须遵循 css 的代码。

<style>
textarea {
    text-align:center;
    padding:50px 0;
    -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
    display:inline-block;
}
</style>

【讨论】：

抱歉，这行不通

【解决方案3】：

好的，我fiddled 看了一会儿，想出了一个模仿您需要的解决方案，它是一个内部带有 textarea 的 div：

HTML

<div id="expandedText">
    <textarea></textarea>
</div>

CSS

div#expandedText {
    width: 250px;
    height: 50px;

    background-color: #fff;
    padding: 50px 10px 40px 10px;
    border: 1px solid #aaa;

    margin: 10px auto;
    text-align: center;
}

div#expandedText > textarea {
    width: 250px;
    height: 50px;

    overflow: hidden;
    text-align: center;
    resize: none;

    outline: 0;
    border: 0;
}

【讨论】：

但是当输入更多时，顶行会被隐藏起来，我想要的是当输入更多时，前面的行应该移动到顶部，保持顶部和底部间距相等。