如何使用 HTML 和 Jquery 根据文本修复文本区域高度 [重复]
Posted
技术标签:
【中文标题】如何使用 HTML 和 Jquery 根据文本修复文本区域高度 [重复]【英文标题】：How to fix textarea height as per text using HTML and Jquery [duplicate] 【发布时间】：2018-10-13 14:33:55 【问题描述】：我需要一个帮助。我需要根据里面写的内容来修复文本区域的高度。我在下面解释我的代码。
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="lib/script.js"></script>
</head>
<body>
<h1>Hello</h1>
<textarea id="textarea-container">
Line 1
Line 2
Line 3
Line 4
ccccccccccccccccccccc
</textarea>
<script>
var $textArea = $("#textarea-container");
// Re-size to fit initial content.
resizeTextArea($textArea);
// Remove this binding if you don't want to re-size on typing.
$textArea.off("keyup.textarea").on("keyup.textarea", function()
resizeTextArea($(this));
);
function resizeTextArea($element)
$element.height($element[0].scrollHeight);
</script>
</body>
</html>
这里有一些文本存在于文本区域及其滚动中。我需要在这里文本区域的高度将根据其中存在的内容扩展，并且不会滚动。
【问题讨论】：
impressivewebs.com/demo-files/textarea-auto-resize 如果上面的链接正是您想要的。这是完整代码的链接。 impressivewebs.com/textarea-auto-resize谢谢 【参考方案1】：我创建了一个简化的示例。它获取textarea 元素的scrollHeight 属性并根据它设置内部高度。 overflow-y: hidden 很重要，否则 scrollHeight 属性会与垂直滚动条一起计算。
// Set height after page has loaded
adjustTextAreaHeight($('#textarea-container'));
// Attach keydown event
$('#textarea-container').on('keydown', adjustTextAreaHeight);
function adjustTextAreaHeight(ta)
if (!ta.length)
ta = $(this);
// Get full scroll height of text area element
var scrollHeight = ta.prop('scrollHeight');
// Some browsers do not shrink element, so we set 0 height at first
ta.innerHeight(0)
.innerHeight(scrollHeight);
#textarea-container
overflow-y: hidden;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Hello</h1>
<textarea id="textarea-container">
Line 1
Line 2
Line 3
Line 4
ccccccccccccccccccccc
</textarea>【讨论】：
以上是关于如何使用 HTML 和 Jquery 根据文本修复文本区域高度 [重复]的主要内容，如果未能解决你的问题，请参考以下文章