Question

这是我输入栏的html：

<div class="btn-group">
  <input type="text" name="caption" class="btn btn-default outline input" autofocus/>
  <input type="submit" value="Submit" name="submit" class="btn btn-default outline">
</div>

我想让文章在文本填满时增加它的行，而不是保留一行并让它继续运行。我怎么能这样做？

谢谢！

编辑：在我的HTML中，我有这个PHP代码：

if (isset($_POST["submit"])) {
if (!empty($_POST["caption"]) && !empty($_FILES["photo"]["name"]))

因此我需要textarea来获取id“caption”我该怎么做？

Answer 1

我认为最好使用

<textarea></textarea>

而不是

<input type="text">

您可以将rows =“”属性添加到标记以指定需要显示的行数

<textarea rows="5"></textarea>

Answer 2

要进行多行输入，您需要使用textarea元素，但它们无法自行增长。您可以使用类似https://github.com/ultimatedelman/autogrow之类的东西，但这很容易使用，例如。

$('textarea').autogrow();

编辑：

检查你是否已经使用jQuery，如果你没有把它放在关闭body标签之前的页面底部，如果你使用的是HTML5 doctype，你可以删除type =“text / javascript ”

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="/path/to/autogrow"></script>
<script type="text/javascript">
$(function() {
    $('textarea').autogrow();
});
</script>

如果您已在某处使用jQuery，请确保在其后面包含最后一个脚本标记。

编辑2：

https://jsfiddle.net/k1cwaomo/

Answer 3

我已经解决了id问题。只需写下：

<textarea name="caption"></textarea>

如何使输入栏的高度取决于文本量

3 个答案: