HTML TextArea自动调整大小

我想要一个文本区域，它总是和文本一样大。所以页面可以滚动，并且文本区域不能滚动。
这里是我所做的到现在为止：HTML TextArea自动调整大小

<!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>

来源

2013-06-24 Infinite Possibilities

[创建具有自动调整大小的一个textarea]的可能重复（HTTP文本自动增加文本区域的高度：//计算器问题/ 454202 /创建一个textarea与自动调整大小） –

我创建了一个包，如果你使用的反应：https://www.npmjs.com/package/react-fluid-textarea –

基于内容的行号调整大小TeaxArea。这里有一个DEMO

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

<textarea id="InputTextArea" placeholder="placeholder" onkeyup="resizeTextarea('InputTextArea')"></textarea>

来源

2013-06-24 22:14:55 shubhra

这个答案很简洁，但最终的结果并不是很顺利。在输入区域扩展之前，文本跳跃很多，导致用户体验不太理想。克里斯G.的答案给出了一个更好的解决方案 –

如果您正在使用AngularJS，你可以这样做：

<textarea ng-keyup="ctl.handleTextAreaHeight($event)"></textarea>

有了这个在你的控制器：

this.handleTextAreaHeight = function (e) { 
    var element = e.target; 

    element.style.overflow = 'hidden'; 
    element.style.height = 0; 
    element.style.height = element.scrollHeight + 'px'; 
};

来源

2016-01-28 11:56:38 Ellone

使用引导程序，它具有类新，其中包括类新是根据它

来源

2016-01-28 12:02:44

...和类名是...？ – infografnet

–

bootstrap向标签提供样式也 –

HTML TextArea自动调整大小

回答

相关问题