Textarea自动高度
我想让textarea的高度等于文本的高度（并删除滚动条）
HTML
<textarea id="note">SOME TEXT</textarea> CSS
textarea#note { width:100%; direction:rtl; display:block; max-width:100%; line-height:1.5; padding:15px 15px 30px; border-radius:3px; border:1px solid #F7E98D; font:13px Tahoma, cursive; transition:box-shadow 0.5s ease; box-shadow:0 4px 6px rgba(0,0,0,0.1); font-smoothing:subpixel-antialiased; background:linear-gradient(#F9EFAF, #F7E98D); background:-o-linear-gradient(#F9EFAF, #F7E98D); background:-ms-linear-gradient(#F9EFAF, #F7E98D); background:-moz-linear-gradient(#F9EFAF, #F7E98D); background:-webkit-linear-gradient(#F9EFAF, #F7E98D); }
JsFiddle： http : //jsfiddle.net/Tw9Rj/
它可以使用JS来实现。 这是一个使用elastic.js的“单行” 解决scheme ：
$('#note').elastic();
更新：似乎像elastic.js不存在了，但如果你正在寻找一个外部库，我可以推荐由杰克摩尔autosize.js。 这是一个工作的例子：
autosize(document.getElementById("note"));
textarea#note { width:100%; box-sizing:border-box; direction:rtl; display:block; max-width:100%; line-height:1.5; padding:15px 15px 30px; border-radius:3px; border:1px solid #F7E98D; font:13px Tahoma, cursive; transition:box-shadow 0.5s ease; box-shadow:0 4px 6px rgba(0,0,0,0.1); font-smoothing:subpixel-antialiased; background:linear-gradient(#F9EFAF, #F7E98D); background:-o-linear-gradient(#F9EFAF, #F7E98D); background:-ms-linear-gradient(#F9EFAF, #F7E98D); background:-moz-linear-gradient(#F9EFAF, #F7E98D); background:-webkit-linear-gradient(#F9EFAF, #F7E98D); }
<script src="jackmoore/autosize/master/dist/autosize.min.js"></script> <textarea id="note">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</textarea>
这使用纯JavaScript代码。
function auto_grow(element) { element.style.height = "5px"; element.style.height = (element.scrollHeight)+"px"; }
textarea { resize: none; overflow: hidden; min-height: 50px; max-height: 100px; }
<textarea onkeyup="auto_grow(this)"></textarea>
对于我们这些用Angular来完成这个，我使用了一个指令
HTML：
<textarea elastic ng-model="someProperty"></textarea>
JS：
.directive('elastic', [ '$timeout', function($timeout) { return { restrict: 'A', link: function($scope, element) { $scope.initialHeight = $scope.initialHeight || element[0].style.height; var resize = function() { element[0].style.height = $scope.initialHeight; element[0].style.height = "" + element[0].scrollHeight + "px"; }; element.on("input change", resize); $timeout(resize, 0); } }; } ]);
$timeout排队一个事件，将在DOM加载后触发，这是得到正确的scrollHeight必要的（否则你会得到undefined ）
我使用jQuery AutoSize 。 当我尝试使用弹性它经常给我假身高（真正高textarea的）。 jQuery的AutoSize运作良好，并没有这个问题。
我看到这已经被回答了，但我相信我有一个简单的jQuery解决scheme（jQuery甚至不是真的需要，我只是喜欢使用它）：
我build议在textarea文本中计算换行符，并相应地设置textarea的rows属性。
var text = jQuery('#your_textarea').val(), // look for any "\n" occurences matches = text.match(/\n/g), breaks = matches ? matches.length : 2; jQuery('#your_textarea').attr('rows',breaks + 2);
的jsfiddle
textarea#note { width:100%; direction:rtl; display:block; max-width:100%; line-height:1.5; padding:15px 15px 30px; border-radius:3px; border:1px solid #F7E98D; font:13px Tahoma, cursive; transition:box-shadow 0.5s ease; box-shadow:0 4px 6px rgba(0,0,0,0.1); font-smoothing:subpixel-antialiased; background:-o-linear-gradient(#F9EFAF, #F7E98D); background:-ms-linear-gradient(#F9EFAF, #F7E98D); background:-moz-linear-gradient(#F9EFAF, #F7E98D); background:-webkit-linear-gradient(#F9EFAF, #F7E98D); background:linear-gradient(#F9EFAF, #F7E98D); height:100%; } html{ height:100%; } body{ height:100%; }
或javascript
var s_height = document.getElementById('note').scrollHeight; document.getElementById('note').setAttribute('style','height:'+s_height+'px');
的jsfiddle
HTML
<textarea id="wmd-input" name="md-content"></textarea>
JS
var textarea = $('#wmd-input'), top = textarea.scrollTop(), height = textarea.height(); if(top > 0){ textarea.css("height",top + height) }
CSS
#wmd-input{ width: 100%; overflow: hidden; padding: 10px; }
var minRows = 5; var maxRows = 26; function ResizeTextarea(id) { var t = document.getElementById(id); if (t.scrollTop == 0) t.scrollTop=1; while (t.scrollTop == 0) { if (t.rows > minRows) t.rows--; else break; t.scrollTop = 1; if (t.rows < maxRows) t.style.overflowY = "hidden"; if (t.scrollTop > 0) { t.rows++; break; } } while(t.scrollTop > 0) { if (t.rows < maxRows) { t.rows++; if (t.scrollTop == 0) t.scrollTop=1; } else { t.style.overflowY = "auto"; break; } } }
