动态调整textarea的宽度和高度以包含文本

我有一个包含textarea元素的div。 div的大小是固定的，但滚动条将显示是否输入了足够的文本。 目前，textarea高度正确地增长和缩小，但不是宽度。

我一直在修改这里给出的代码： http ：//alistapart.com/article/expanding-text-areas-made-elegant并且已经达到了这一点（在jsfiddle中显示）： http ： //jsfiddle.net/fayu5sh2/ 2 /

它目前的工作方式是将textarea设置为div的100％宽度和高度，并将其内容输入隐藏的跨度，这会改变高度（按下enter时）和包含div的宽度。 当跨度正确运行时，textarea不保持宽度：100％。 是否有可能做到这一点？

隐藏的跨度当前可见以显示其内容正在执行的操作，文本区域中的文本应直接位于跨度中的文本顶部。

这是html：

 
 


  

  
 这是javascript： 
 $(document).ready( function() { $('div.expandingArea').each(function() { var area = $('textarea', $(this)); var span = $('span', $(this)); area.bind('input', function() { span.text(area.val()); }); span.text(area.val()); $(this).addClass('active'); }); } ); 
 和CSS： 
 #containing_box { width: 300px; height: 200px; overflow: auto; border: 1px solid; } textarea, pre, p { margin: 0; padding: 0; outline: 0; border: 0; } .expandingArea { position: relative; border: 1px solid #888; background: #fff; } .expandingArea > textarea, .expandingArea > pre { padding: 5px; background: transparent; white-space: pre; } .expandingArea > textarea { /* The border-box box model is used to allow * padding whilst still keeping the overall width * at exactly that of the containing element. */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; /* This height is used when JS is disabled */ height: 100px; width: 100px; } .expandingArea.active > textarea { /* Hide any scrollbars */ overflow: hidden; position: absolute; top: 0; left: 0; height: 100%; width: 100%; /* Remove WebKit user-resize widget */ resize: none; } .expandingArea > pre { /* display: none;*/ color: blue; } .expandingArea.active > pre { display: block; /* Hide the text; just using it for sizing */ /* visibility: hidden; */ } 


	







 
	
Answer 1
		      	
 您可以通过在keyup事件中监视其scrollWidth和scrollHeight来动态调整textarea大小。 
 此代码调整所有textarea的大小，同时保持最小宽度和高度为50px： 
 $('textarea').on('keyup',function() { $(this).css('width','0px'); $(this).css('height','0px'); $(this).css('width',Math.max(50,this.scrollWidth)+'px'); $(this).css('height',Math.max(50,this.scrollHeight)+'px'); }); 
 请注意， width和height首先设置为0以强制滚动。 
 将textarea的wrap属性设置为“off”： 
  
 并将其样式设置为overflow:hidden ： 
 textarea { overflow:hidden; } 
 小提琴在http://jsfiddle.net/aj9tarnu/ 


Answer 2
		      	
 在javascript中添加此项 
 $('textarea').on('keyup',function(){ var spanwidth = $('span').css('width') $('textarea').css('width',spanwidth) }) 
 inheritance人小提琴http://jsfiddle.net/fayu5sh2/5/ 
 如果您在页面上有多个这样的内容，则需要使用ID或类而不是一般的“span”和“textarea”