jQuery 根据内容自动调整文本区域的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19170083/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatically resize text area based on content
提问by Ryan Mortensen
On one of my pages, I have a text area html tag for users to write a letter in. I want the content below the text area to shift down, or in other words, I want the text area to resize vertically with each line added to the text area and to have the content below simply be positioned in relation to the bottom of the text area.
在我的一个页面上，我有一个文本区域 html 标签供用户写信。我希望文本区域下方的内容向下移动，或者换句话说，我希望文本区域在添加的每一行后垂直调整大小到文本区域并让下面的内容简单地相对于文本区域的底部定位。
What I am hoping is that javascript/jquery has a way to detect when the words wrap, or when a new line is added and based on that do a resize of the text area container.
我希望 javascript/jquery 有一种方法可以检测文字何时换行，或者何时添加新行并基于此调整文本区域容器的大小。
My goal is to make the content below the text area stay the same distance from the bottom of the text no matter how much a user writes.
我的目标是让文本区域下方的内容与文本底部保持相同的距离，无论用户写多少。
The text area creates a scroll bar when the text overflows.
当文本溢出时，文本区域会创建一个滚动条。
采纳答案by Ryan Mortensen
http://www.Hymanlmoore.com/autosize/
http://www.Hymanlmoore.com/autosize/
Download the plugin first:
先下载插件：
Step 1: Put "jquery.autoresize.min.js" where you keep your jquery plugins.
第 1 步：将“jquery.autoresize.min.js”放在您保存 jquery 插件的位置。
Step 2: Link the file in HTML -> <script src="jquery.autosize.min.js" type="text/javascript" ></script>Be sure that this link comes after your jquery link, and before your own javascript/jquery code links.
第 2 步：在 HTML 中链接文件 -><script src="jquery.autosize.min.js" type="text/javascript" ></script>确保此链接在您的 jquery 链接之后，在您自己的 javascript/jquery 代码链接之前。
Step 3: In your javascript code file simply add $('#containerToBeResized').autosize();
第 3 步：在您的 javascript 代码文件中简单地添加 $('#containerToBeResized').autosize();
回答by Thaylon
Since I wasn't too happy with several solutions I found on the web, here's my take on it.
由于我对在网上找到的几个解决方案不太满意，这是我的看法。
Respects min-height, max-height. Avoids jumping around and flashing the scrollbar by adding a buffer to the height (currently 20, may replace by line-height). However still shows scrollbar when max-height is reached. Avoids resetting the container scroll position by incrementally reducing the textarea height instead of setting it to 0. Will thusly also remove all deleted rows at once. Works in IE and Chrome without browser sniffing.
尊重最小高度，最大高度。通过向高度添加缓冲区来避免跳跃和闪烁滚动条（当前为 20，可能会替换为 line-height）。但是当达到最大高度时仍然显示滚动条。避免通过逐步减小 textarea 高度而不是将其设置为 0 来重置容器滚动位置。因此也会一次删除所有已删除的行。无需浏览器嗅探即可在 IE 和 Chrome 中运行。
<textarea id="ta"></textarea>
<textarea id="ta"></textarea>
#ta {
width:250px;
min-height:116px;
max-height:300px;
resize:none;
}
$("#ta").keyup(function (e) {
autoheight(this);
});
function autoheight(a) {
if (!$(a).prop('scrollTop')) {
do {
var b = $(a).prop('scrollHeight');
var h = $(a).height();
$(a).height(h - 5);
}
while (b && (b != $(a).prop('scrollHeight')));
};
$(a).height($(a).prop('scrollHeight') + 20);
}
autoheight($("#ta"));
回答by Berat Bilgin
回答by Adam C
See this Fiddlefrom this answer. That increases the height of the textarea based on the number of lines.
从这个答案中看到这个小提琴。这会根据行数增加 textarea 的高度。
I think that's what you're asking for.
我想这就是你要问的。
Copied the code from the answer below:
从下面的答案中复制代码：
HTML
HTML
<p>Code explanation: <a href="http://www.impressivewebs.com/textarea-auto-resize/">Textarea Auto Resize</a></p>
<textarea id="comments" placeholder="Type many lines of texts in here and you will see magic stuff" class="common"></textarea>
JS
JS
/*global document:false, $:false */
var txt = $('#comments'),
hiddenDiv = $(document.createElement('div')),
content = null;
txt.addClass('txtstuff');
hiddenDiv.addClass('hiddendiv common');
$('body').append(hiddenDiv);
txt.on('keyup', function () {
content = $(this).val();
content = content.replace(/\n/g, '<br>');
hiddenDiv.html(content + '<br class="lbr">');
$(this).css('height', hiddenDiv.height());
});
CSS
CSS
body {
margin: 20px;
}
p {
margin-bottom: 14px;
}
textarea {
color: #444;
padding: 5px;
}
.txtstuff {
resize: none; /* remove this if you want the user to be able to resize it in modern browsers */
overflow: hidden;
}
.hiddendiv {
display: none;
white-space: pre-wrap;
word-wrap: break-word;
overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
}
/* the styles for 'commmon' are applied to both the textarea and the hidden clone */
/* these must be the same for both */
.common {
width: 500px;
min-height: 50px;
font-family: Arial, sans-serif;
font-size: 13px;
overflow: hidden;
}
.lbr {
line-height: 3px;
}
