input [type = text]在x个字符后垂直增长输入并垂直对齐文本

Question

搜索没有喜欢...发布问题，如果存在现有答案，请分享：）

所以我所拥有的是一个基本输入字段：

<input type="text" name="foo" id="bar" value="" maxlength="200" required>

我希望发生什么，并且我知道这违反了所有标准，但我们只是忽略它，就是让用户拥有输入字段垂直（即：向下）键入一定数量的字符（比方说30），因此它看起来更像type=[textarea]而不是type=[text]

它还应该使文本保持对齐在输入字段的顶部而不是中间居中。

我们如何使用query和css ??

进行此操作

Answer 1

使用textarea自动调整大小...从here下载jquery并将$(textarea).autoResize();添加到您的代码中，如果你想在jquery和html中使用它，请参阅fiddle

Answer 2

我认为这就是你要找的： -

当我向(say height:300px;)标记提供高度<input type="text">时，它会在中间显示文字，但要在顶部显示文字，我们必须提供底部填充(say padding-bottom:300px;)，然后它会保持文本在顶部，看起来像文本区域。

<style type="text/css">
input#bar{ padding-bottom:300px;}
</style>
<input type="text" name="foo" id="bar" value="" maxlength="200" required>