HTML TextArea 自动调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17283878/
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
HTML TextArea resize automatically
提问by Infinite Possibilities
I would like to have a text area which is always as big as the text in it. So the page can be scrolled and in the text area cannot be scrolled.
Here's what I did until now:
我想要一个文本区域，它总是与其中的文本一样大。所以页面可以滚动，而在文本区域不能滚动。
这是我到目前为止所做的：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {height: 100%;}
textarea {
border: none;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
line-height: 44px;
font-family:Helvetica;
font-size: 17pt;
-webkit-tap-highlight-color: rgba(0,0,0,0);
background-image:url('[email protected]');
outline: none;
resize: none;
}
textarea.vert { resize:vertical; }
</style></head><body>
<textarea id="InputTextArea" placeholder="placeholder"></textarea>
</body></html>
回答by shubhra
Resizing TeaxArea based on the content line number. Here's a DEMO
根据内容行号调整 TeaxArea 的大小。这是一个演示
JS
JS
function resizeTextarea (id) {
var a = document.getElementById(id);
a.style.height = 'auto';
a.style.height = a.scrollHeight+'px';
}
function init() {
var a = document.getElementsByTagName('textarea');
for(var i=0,inb=a.length;i<inb;i++) {
if(a[i].getAttribute('data-resizable')=='true')
resizeTextarea(a[i].id);
}
}
addEventListener('DOMContentLoaded', init);
HTML
HTML
<textarea id="InputTextArea" placeholder="placeholder" onkeyup="resizeTextarea('InputTextArea')"></textarea>
回答by Ellone
If you are using AngularJS, you can do :
如果您使用的是 AngularJS，则可以执行以下操作：
<textarea ng-keyup="ctl.handleTextAreaHeight($event)"></textarea>
With this in your controller :
在您的控制器中使用它：
this.handleTextAreaHeight = function (e) {
var element = e.target;
element.style.overflow = 'hidden';
element.style.height = 0;
element.style.height = element.scrollHeight + 'px';
};
回答by AniMir
In case anyone still needs this, for what it's worth, here's mine in pure js. But first, you may check this one: Auto expand a textarea using jQuery
如果有人仍然需要这个，不管它的价值，这是我的纯 js。但首先，您可以检查这个： Auto expand a textarea using jQuery
var textAreas = document.getElementsByTagName('textarea');
try {
taLength = textAreas.length;
for (i=0; i < taLength; i++) {
var taId = textAreas[i].id;
document.getElementById(taId).addEventListener('input', function(e) {
e.target.style.height = "auto";
//This makes your textarea back to its original size. So you can replace it with any size you want it to have e.g. "120px"
//You may need some logic if you have multiple taxtareas with different original sizes
e.target.style.height = e.target.scrollHeight+'px';
});
}
}
catch (err) {
window.alert(err);
}
I used shubhra's answer to build that one. It is smooth and the scrollbar won't appear.
我使用 shubhra 的答案来构建那个。它是平滑的，不会出现滚动条。
回答by mili
If someone need a solution for Vue.js. Here is a vue directive to do a auto resizing text area. Just register directive globally once and you can use it for any textarea
如果有人需要 Vue.js 的解决方案。这是一个执行自动调整文本区域大小的 vue 指令。只需全局注册一次指令，您就可以将其用于任何文本区域
Vue.directive('resizable', {
inserted: function (el) {
el.addEventListener('input', function(e) {
e.target.style.height = "auto";
e.target.style.height = e.target.scrollHeight + 'px';
});
}
});
html is easy, just put v-resizable attribute in textarea
html 很简单，只需将 v-resizable 属性放在 textarea 中
<textarea v-resizable></textarea>
Special thanks to AniMir! I am using his input event handler.
特别感谢 AniMir！我正在使用他的输入事件处理程序。
回答by Saad Mirza
Use Bootstrap,It have the classess ,which include classess that automatically increase the height of text area according to the text in it
使用 Bootstrap，它有 classess ，其中包括根据其中的文本自动增加文本区域高度的 classess
