Javascript 自动扩展文本区域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7745741/
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
Auto-expanding textarea
提问by Devin G Rhode
I'm trying to do a simple auto-expanding textarea. This is my code:
我正在尝试做一个简单的自动扩展文本区域。这是我的代码：
textarea.onkeyup = function () {
textarea.style.height = textarea.clientHeight + 'px';
}
But the textarea just keeps growing indefinitely as you type...
但是 textarea 只是在您键入时无限期地增长......
I know there is Dojo and a jQuery plugin for this, but would rather not have to use them. I looked at their implementation, and was initially using scrollHeightbut that did the same thing.
我知道有 Dojo 和一个 jQuery 插件，但不想使用它们。我查看了他们的实现，最初正在使用，scrollHeight但也做了同样的事情。
You can start answering and play with the textarea for your answer to play with.
您可以开始回答并使用文本区域来播放您的答案。
回答by Rob W
Reset the height before Using scrollHeightto expand/shrink the textarea correctly. Math.min()can be used to set a limit on the textarea's height.
在使用之前重置高度scrollHeight以正确扩展/缩小文本区域。Math.min()可用于对 textarea 的高度设置限制。
Code:
代码：
var textarea = document.getElementById("textarea");
var heightLimit = 200; /* Maximum height: 200px */
textarea.oninput = function() {
textarea.style.height = ""; /* Reset the height*/
textarea.style.height = Math.min(textarea.scrollHeight, heightLimit) + "px";
};
Fiddle: http://jsfiddle.net/gjqWy/155
小提琴：http: //jsfiddle.net/gjqWy/155
Note: The inputeventis not supported by IE8 and earlier. Use keydownor keyupwith onpasteand/or oncutif you want to support this ancient browser as well.
注意：IE8 及更早版本不支持该input事件。使用keydown或keyup使用onpaste和/或oncut如果你想支持这个古老的浏览器也是如此。
回答by VitalyB
I've wanted to have the auto-expanding area to be limited by rows number (e.g 5 rows). I've considered using "em" units, for Rob's solutionhowever, this is error-proneand wouldn't take account stuff like padding, etc.
我想让自动扩展区域受行数（例如 5 行）的限制。我已经考虑使用“em”单位，但是对于Rob 的解决方案，这很容易出错，并且不会考虑填充等内容。
So this is what I came up with:
所以这就是我想出的：
var textarea = document.getElementById("textarea");
var limitRows = 5;
var messageLastScrollHeight = textarea.scrollHeight;
textarea.oninput = function() {
var rows = parseInt(textarea.getAttribute("rows"));
// If we don't decrease the amount of rows, the scrollHeight would show the scrollHeight for all the rows
// even if there is no text.
textarea.setAttribute("rows", "1");
if (rows < limitRows && textarea.scrollHeight > messageLastScrollHeight) {
rows++;
} else if (rows > 1 && textarea.scrollHeight < messageLastScrollHeight) {
rows--;
}
messageLastScrollHeight = textarea.scrollHeight;
textarea.setAttribute("rows", rows);
};
Fiddle: http://jsfiddle.net/cgSj3/
回答by av av
For those interested in a jQuery version of Rob W'ssolution:
对于那些对 jQuery 版本的Rob W解决方案感兴趣的人：
var textarea = jQuery('.textarea');
textarea.on("input", function () {
jQuery(this).css("height", ""); //reset the height
jQuery(this).css("height", Math.min(jQuery(this).prop('scrollHeight'), 200) + "px");
});
回答by freeworlder
...and if you need an infinitely expanding textarea (as I did), just do this:
...如果你需要一个无限扩展的 textarea（就像我一样），就这样做：
var textarea = document.getElementById("textarea");
textarea.oninput = function() {
textarea.style.height = ""; /* Reset the height*/
textarea.style.height = textarea.scrollHeight + "px";
};
回答by Guan Yuxin
using
使用
<div contentEditable></div>
<div contentEditable></div>
may also do the same work, expanding it self, and requires no js
也可以做同样的工作，自己扩展，不需要js
