Question

我有一个HTML代码，如果评论的大小很大，用户就会输入特定问题的评论我想让我的文本框自动增加评论的高度以下是我的HTML代码：

<label class="label-reports">Comments</label>
 <input  @((ViewBag.UserId != null && ViewBag.UserId == question.AnsweredBy) || (question.AnsweredBy == null) ? "" : "disabled")  type="text" class="form-control" style="align-content:stretch; min-width:1200Px; width: auto !important" for="comments" value="@question.Comments" />

我试图实现这个

<textarea class="form-control" rows="5"></textarea>*

但没有成功可以有人建议增加文本框的大小

Answer 1

适用于<textarea>元素......

如果您不反对使用插件，可以使用autosize之类的内容，这样您的<textarea>元素就可以按预期增长：

<!-- Example autosize.js CDN Reference -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.15/autosize.min.js'></script>
<script>
    // Automatically size all of your <textarea> elements as you type
    autosize(document.querySelectorAll('textarea'));
</script>

互动示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Autosize Example</title>
</head>
<body>
  <pre>Start typing (and press Enter a few times)</pre>
  <textarea></textarea>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/autosize.js/3.0.15/autosize.min.js'></script>
  <script>
    autosize(document.querySelectorAll('textarea'));
  </script>
</body>
</html>

适用于<input>元素......

不必忽略

<input>个元素。有一个恰当命名的autosize-input插件基本上可以实现相同的基本功能：

<!-- Example autosize.js CDN Reference -->
<script src="https://rawgit.com/yuanqing/autosize-input/master/autosize-input.min.js"></script>
<script>
    // Automatically size all of your <textarea> elements as you type
    autosizeInput(document.querySelector('#YourInputID'));
</script>

输入文本时自动增加输入的大小

1 个答案: