gpt4 book ai didi

html - 输入文本后自动增加输入大小

转载 作者:行者123 更新时间:2023-11-28 05:59:33 26 4
gpt4 key购买 nike

我有一个 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>*

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

最佳答案

对于 <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>

enter image description here

交互示例

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

关于html - 输入文本后自动增加输入大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36846542/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com