Html 实现可调整大小的文本区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/149421/
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
Implementing a resizable textarea?
提问by Mark Biek
How does Stackoverflow implement the resizable textarea?
Stackoverflow 如何实现可调整大小的 textarea？
Is that something they rolled themselves or is it a publicly available component that I can easily attach to textareas on my sites?
这是他们自己推出的东西，还是我可以轻松附加到我网站上的文本区域的公开可用组件？
I found this question and it doesn't quite do what I want.
我发现了这个问题，但它并不完全符合我的要求。
That talks more about automatically resizing textareas whereas I want the little grab-area that you can drag up and down.
这更多地讨论了自动调整文本区域的大小，而我想要一个可以上下拖动的小抓取区域。
回答by Shog9
StackOverflow uses a jQuery plugin to accomplish this: TextAreaResizer.
StackOverflow 使用一个 jQuery 插件来实现这一点：TextAreaResizer。
It's easy enough to verify this - just pull the JSfiles from the site.
验证这一点很容易 - 只需从站点中提取JS文件即可。
Historical note:when this answer was originally written, WMD and TextAreaResizer were two separate plugins, neither one of which was authored by the SO Dev Team (see also: micahwittman's answer). Also, the JavaScript for the site was quite easy to read... None of these are strictlytrue anymore, but TextAreaResizer still works just fine.
历史记录：最初编写此答案时，WMD 和 TextAreaResizer 是两个独立的插件，它们都不是由 SO Dev Team 编写的（另请参阅：micahwittman 的答案）。此外，该站点的 JavaScript 非常易于阅读......这些都不再是严格正确的，但 TextAreaResizer 仍然可以正常工作。
回答by Roman Ganz
回答by micahwittman
At first I believed it was a built-in feature of the Wysiwym Markdown editor, but Shog9 is correct: it's not baked-in at all, but is courtesy of the jQuery plugin TextAreaResizer (I was lead astray by the browser was using to check on the editor demobecause Google Chrome itself adds the expandable functionality on textareas—much like the Safari browser does).
起初我相信它是Wysiwym Markdown 编辑器的内置功能，但 Shog9 是正确的：它根本不是内置的，而是由 jQuery 插件 TextAreaResizer 提供的（我被浏览器误导了，用于检查在编辑器演示中，因为 Google Chrome 本身在 textareas 上添加了可扩展的功能 - 很像 Safari 浏览器所做的）。
回答by benshope
Using AngularJS:
使用 AngularJS：
angular.module('app').directive('textarea', function() {
return {
restrict: 'E',
controller: function($scope, $element) {
$element.css('overflow-y','hidden');
$element.css('resize','none');
resetHeight();
adjustHeight();
function resetHeight() {
$element.css('height', 0 + 'px');
}
function adjustHeight() {
var height = angular.element($element)[0]
.scrollHeight + 1;
$element.css('height', height + 'px');
$element.css('max-height', height + 'px');
}
function keyPress(event) {
// this handles backspace and delete
if (_.contains([8, 46], event.keyCode)) {
resetHeight();
}
adjustHeight();
}
$element.bind('keyup change blur', keyPress);
}
};
});
This will transform all your textareas to grow/shrink. If you want only specific textareas to grow/shrink - change the top part to read like this:
这会将您所有的 textarea 转换为增长/缩小。如果您只希望特定的 textarea 增长/缩小 - 将顶部更改为如下所示：
angular.module('app').directive('expandingTextarea', function() {
return {
restrict: 'A',
Hope that helps!
希望有帮助！
回答by Martin Prestone
what about this, its work
怎么样，它的工作
<textarea oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
