使用自动resize创build一个textarea
还有另一个关于这个的线索 ，我试过了。 但是有一个问题：如果删除内容，textarea不会缩小。 我找不到任何方法缩小到正确的大小 – clientHeight值作为textarea的完整大小，而不是其内容。
该页面的代码如下。 我会很感激任何帮助或指针。
function FitToContent(id, maxHeight) { var text = id && id.style ? id : document.getElementById(id); if ( !text ) return; var adjustedHeight = text.clientHeight; if ( !maxHeight || maxHeight > adjustedHeight ) { adjustedHeight = Math.max(text.scrollHeight, adjustedHeight); if ( maxHeight ) adjustedHeight = Math.min(maxHeight, adjustedHeight); if ( adjustedHeight > text.clientHeight ) text.style.height = adjustedHeight + "px"; } } window.onload = function() { document.getElementById("ta").onkeyup = function() { FitToContent( this, 500 ) }; } 这适用于我（Firefox 3.6 / 4.0和Chrome 10/11）：
var observe; if (window.attachEvent) { observe = function (element, event, handler) { element.attachEvent('on'+event, handler); }; } else { observe = function (element, event, handler) { element.addEventListener(event, handler, false); }; } function init () { var text = document.getElementById('text'); function resize () { text.style.height = 'auto'; text.style.height = text.scrollHeight+'px'; } /* 0-timeout to get the already changed text */ function delayedResize () { window.setTimeout(resize, 0); } observe(text, 'change', resize); observe(text, 'cut', delayedResize); observe(text, 'paste', delayedResize); observe(text, 'drop', delayedResize); observe(text, 'keydown', delayedResize); text.focus(); text.select(); resize(); }
textarea { border: 0 none white; overflow: hidden; padding: 0; outline: none; background-color: #D0D0D0; }
<body onload="init();"> <textarea rows="1" style="height:1em;" id="text"></textarea> </body>
一个完整的解决scheme
Updated 23/08/2017 （改进的浏览器支持手机和平板电脑）
以下代码将起作用：
- 在关键input。
- 粘贴文本（右键单击＆ctrl + v）。
- 用剪切文本（右键单击＆ctrl + x）。
- 预加载的文本。
- 所有textarea的（多行文本框）网站广泛。
- 随着Firefox （v31-55testing）。
- 与Chrome （v37-60testing）。
- 用IE （v9-v11testing）。
- 与边缘 （v14-v15testing）。
- 与IOS Safari 。
- 使用Android浏览器 。
- 使用JavaScript 严格模式 。
- 是W3Cvalidation。
- 精简和高效。
选项1 （使用jQuery）
这段代码需要jQuery，并且已经过testing，正在使用1.7.2 – 3.2.1
简单 （将这个jQuery代码添加到您的主脚本文件，并忘记它。）
$('textarea').each(function () { this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;'); }).on('input', function () { this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px'; });
<script src="jquery-3.2.1.min.js"></script> <textarea placeholder="Type, paste, cut text here...">PRELOADED TEXT. This javascript should now add better support for IOS browsers and Android browsers.</textarea> <textarea placeholder="Type, paste, cut text here..."></textarea>
jQuery解决scheme调整CSS以符合您的要求
三网融合
div#container textarea { min-width: 270px; width: 270px; height: 22px; line-height: 24px; min-height: 22px; overflow-y: hidden; /* fixes scrollbar flash - kudos to @brettjonesdev */ padding-top: 1.1em; /* fixes text jump on Enter keypress */ }
JavaScript的…
// auto adjust the height of $('#container').delegate( 'textarea', 'keydown', function (){ $(this).height( 0 ); $(this).height( this.scrollHeight ); }); $('#container').find( 'textarea' ).keydown();
或替代jQuery 1.7 + …
// auto adjust the height of $('#container').on( 'keyup', 'textarea', function (){ $(this).height( 0 ); $(this).height( this.scrollHeight ); }); $('#container').find( 'textarea' ).keyup();
我已经创build了绝对最小样式的小提琴作为您的实验的起点… http://jsfiddle.net/53eAy/951/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Textarea autoresize</title> <style> textarea { overflow: hidden; } </style> <script> function resizeTextarea(ev) { this.style.height = '24px'; this.style.height = this.scrollHeight + 12 + 'px'; } var te = document.querySelector('textarea'); te.addEventListener('input', resizeTextarea); </script> </head> <body> <textarea></textarea> </body> </html>
在Firefox 14和Chrome 18testing。数字24和12是任意的，testing看看最适合你。
你可以没有风格和脚本标签，但它会变得有点凌乱（这是老式的HTML + JS，不鼓励）。
<textarea style="overflow: hidden" onkeyup="this.style.height='24px'; this.style.height = this.scrollHeight + 12 + 'px';"></textarea>
编辑：现代化的代码。 将onkeyup属性更改为addEventListener。
编辑：keydown比keyup更好
编辑：使用前声明函数
编辑：input比keydown更好（thnx @ WASD42＆@ MA-Maddin）
的jsfiddle
对我来说，最好的解决scheme（工作和简短）是：
$(document).on('input', 'textarea', function () { $(this).outerHeight(38).outerHeight(this.scrollHeight); // 38 or '1em' -min-height });
它像一个魅力，没有任何与粘贴（鼠标也）闪烁，切，进入，它收缩到正确的大小。
请看看jsFiddle 。
您正在使用当前clientHeight和内容scrollHeight的较高值。 当您通过删除内容使scrollHeight变小时，计算的区域不能变小，因为之前由style.height设置的clientHeight将其保持打开状态。 您可以改为使用scrollHeight的max（）和从textarea.rows中预定义或计算的最小高度值。
一般来说，你可能不应该真的依靠窗体控件上的scrollHeight。 除了scrollHeight传统上不如其他一些IE扩展支持，HTML / CSS没有提到如何在内部实现表单控件，并且不保证scrollHeight会有意义。 （传统上，一些浏览器已经使用了操作系统部件来完成任务，这使得CSS和DOM在其内部的交互成为不可能）。至less在尝试启用效果之前嗅探scrollHeight / clientHeight的存在。
另一种可能的替代方法是避免这个问题，如果它更加广泛的工作很重要，那么可以使用一个隐藏的div，大小与textarea相同，并设置为相同的字体。 在keyup中，将文本从textarea复制到隐藏div中的文本节点（记住用换行符replace'\ n'，如果使用的是innerHTML，则正确地转义'<'/'＆'）。 然后简单地测量div的offsetHeight会给你你需要的高度。
如果您不需要支持IE8，则可以使用input事件：
var resizingTextareas = [].slice.call(document.querySelectorAll('textarea[autoresize]')); resizingTextareas.forEach(function(textarea) { textarea.addEventListener('input', autoresize, false); }); function autoresize() { this.style.height = 'auto'; this.style.height = this.scrollHeight+'px'; this.scrollTop = this.scrollHeight; window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight)); }
现在你只需要添加一些CSS，你就完成了：
textarea[autoresize] { display: block; overflow: hidden; resize: none; }
用法：
<textarea autoresize>Type here and I'll resize.</textarea>
你可以阅读更多关于它如何在我的博客文章 。
autosize jQuery插件只是工作，是stream行（ 1.5K GitHub星级 ， CDNJS ）和轻量级（ 〜3K ）。 演示：
<textarea id="autosize" style="width:200px;">a b c</textarea> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/autosize.js/1.18.4/jquery.autosize.min.js"></script> <script>$('#autosize').autosize()</script>
我用下面的代码为多个textareas。 在Chrome 12，Firefox 5和IE 9中运行良好，甚至可以在textareas中执行删除，剪切和粘贴操作。
<!-- language: lang-html --> <style type='text/css'> textarea { border:0 none; overflow:hidden; outline:none; background-color:#eee } </style> <textarea style='height:100px;font-family:arial' id="txt1"></textarea> <textarea style='height:125px;font-family:arial' id="txt2"></textarea> <textarea style='height:150px;font-family:arial' id="txt3"></textarea> <textarea style='height:175px;font-family:arial' id="txt4"></textarea> <script type='text/javascript'> function attachAutoResizeEvents() { for(i=1;i<=4;i++) { var txtX=document.getElementById('txt'+i) var minH=txtX.style.height.substr(0,txtX.style.height.indexOf('px')) txtX.onchange=new Function("resize(this,"+minH+")") txtX.onkeyup=new Function("resize(this,"+minH+")") txtX.onchange(txtX,minH) } } function resize(txtX,minH) { txtX.style.height = 'auto' // required when delete, cut or paste is performed txtX.style.height = txtX.scrollHeight+'px' if(txtX.scrollHeight<=minH) txtX.style.height = minH+'px' } window.onload=attachAutoResizeEvents </script>
有没有人认为contented？ 没有弄乱滚动，唯一的JS我喜欢它是如果你打算保存数据模糊…显然，它是兼容的所有stream行的浏览器： http : //caniuse.com/#feat = CONTENTEDITABLE
只是把它看起来像一个文本框，它自动化…使其最小高度的首选文本高度，并在其上。
这种方法最酷的是你可以在一些浏览器上保存和标记。
http://jsfiddle.net/gbutiri/v31o8xfo/
<style> .autoheight { min-height: 16px; font-size: 16px; margin: 0; padding: 10px; font-family: Arial; line-height: 16px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow: hidden; resize: none; border: 1px solid #ccc; outline: none; width: 200px; } </style> <script src="jquery-2.1.1.min.js"></script> <script> $(document).on('blur','.autoheight',function(e) { var $this = $(this); // The text is here. Do whatever you want with it. console.log($this.html()); }); </script> <div class="autoheight contenteditable" contenteditable="true">Mickey Mouse</div>
有一个稍微不同的方法。
<div style="position: relative"> <pre style="white-space: pre-wrap; word-wrap: break-word"></pre> <textarea style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea> </div>
这个想法是将文本从textarea复制到pre并让CSS确保它们具有相同的大小。
好处是框架提供简单的工具来移动文本而不触及任何事件。 也就是说，在AngularJS中，你可以在textarea和ng-bind="foo + '\n'" pre添加一个ng-model="foo" ng-trim="false" 。 看小提琴 。
只要确保pre具有与textarea相同的字体大小。
有点更正。 在Opera中完美运行
$('textarea').bind('keyup keypress', function() { $(this).height(''); var brCount = this.value.split('\n').length; this.rows = brCount+1; //++ To remove twitching var areaH = this.scrollHeight, lineHeight = $(this).css('line-height').replace('px',''), calcRows = Math.floor(areaH/lineHeight); this.rows = calcRows; });
我知道一个简短而正确的方式来实现这与jquery.No额外的隐藏的div需要和工作在大多数浏览器
<script type="text/javascript">$(function(){ $("textarea").live("keyup keydown",function(){ var h=$(this); h.height(60).height(h[0].scrollHeight);//where 60 is minimum height of textarea });}); </script>
这里的一些答案不包括填充。
假设你有一个maxHeight你不想去，这对我工作：
// obviously requires jQuery // element is the textarea DOM node var $el = $(element); // inner height is height + padding // outerHeight includes border (and possibly margins too?) var padding = $el.innerHeight() - $el.height(); var originalHeight = $el.height(); // XXX: Don't leave this hardcoded var maxHeight = 300; var adjust = function() { // reset it to the original height so that scrollHeight makes sense $el.height(originalHeight); // this is the desired height (adjusted to content size) var height = element.scrollHeight - padding; // If you don't want a maxHeight, you can ignore this height = Math.min(height, maxHeight); // Set the height to the new adjusted height $el.height(height); } // The input event only works on modern browsers element.addEventListener('input', adjust);
我不知道是否有人提到这种方式，但在某些情况下，可以使用行属性调整高度
textarea.setAttribute('rows',breaks);
演示
一个更简单，更清洁的方法是这样的：
// adjust height of textarea.auto-height $(document).on( 'keyup', 'textarea.auto-height', function (e){ $(this).css('height', 'auto' ); // you can have this here or declared in CSS instead $(this).height( this.scrollHeight ); }).keyup();
//和CSS
textarea.auto-height { resize: vertical; max-height: 600px; /* set as you need it */ height: auto; /* can be set here of in JS */ overflow-y: auto; word-wrap:break-word }
所有需要的是将.auto-height类添加到您想要定位的任何textarea 。
在FF，Chrome和Safari中testing。 让我知道如果这不适合你，出于任何原因。 但是，这是我发现这个工作最干净和最简单的方法。 它工作的很棒！ ：d
此代码适用于粘贴并select删除也。
onKeyPressTextMessage = function(){ var textArea = event.currentTarget; textArea.style.height = 'auto'; textArea.style.height = textArea.scrollHeight + 'px'; };
<textarea onkeyup="onKeyPressTextMessage(event)" name="welcomeContentTmpl" id="welcomeContent" onblur="onblurWelcomeTitle(event)" rows="2" cols="40" maxlength="320"></textarea>
只需使用<pre> </pre>以一些样式，如：
pre { font-family: Arial, Helvetica, sans-serif; white-space: pre-wrap; word-wrap: break-word; font-size: 12px; line-height: 16px; }
以下是剪切，粘贴等操作，无论这些操作是否来自鼠标，键盘快捷键，从菜单栏中select一个选项…几个答案采取类似的方法，但他们没有考虑到盒子，大小，这就是为什么他们错误地应用风格overflow: hidden 。
我做了以下，这也适用于max-height和rows的最小和最大高度。
function adjust() { var style = this.currentStyle || window.getComputedStyle(this); var boxSizing = style.boxSizing === 'border-box' ? parseInt(style.borderBottomWidth, 10) + parseInt(style.borderTopWidth, 10) : 0; this.style.height = ''; this.style.height = (this.scrollHeight + boxSizing) + 'px'; }; var textarea = document.getElementById("ta"); if ('onpropertychange' in textarea) { // IE textarea.onpropertychange = adjust; } else if ('oninput' in textarea) { textarea.oninput = adjust; } setTimeout(adjust.bind(textarea));
textarea { resize: none; max-height: 150px; border: 1px solid #999; outline: none; font: 18px sans-serif; color: #333; width: 100%; padding: 8px 14px; box-sizing: border-box; }
<textarea rows="3" id="ta"> Try adding several lines to this. </textarea>
这是我为TextArea使用MVC HTML Helper时所做的。 我有相当多的textarea元素，所以必须使用模型ID来区分它们。
@Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })
并在脚本中添加了这一点：
function resizeTextBox(ID) { var text = document.getElementById('text' + ID); text.style.height = 'auto'; text.style.height = text.scrollHeight + 'px'; }
我已经在IE10和Firefox23上testing过了
你可以使用这个代码：
Coffescript：
jQuery.fn.extend autoHeightTextarea: -> autoHeightTextarea_ = (element) -> jQuery(element).css( 'height': 'auto' 'overflow-y': 'hidden').height element.scrollHeight @each -> autoHeightTextarea_(@).on 'input', -> autoHeightTextarea_ @ $('textarea_class_or_id`').autoHeightTextarea()
使用Javascript
jQuery.fn.extend({ autoHeightTextarea: function() { var autoHeightTextarea_; autoHeightTextarea_ = function(element) { return jQuery(element).css({ 'height': 'auto', 'overflow-y': 'hidden' }).height(element.scrollHeight); }; return this.each(function() { return autoHeightTextarea_(this).on('input', function() { return autoHeightTextarea_(this); }); }); } }); $('textarea_class_or_id`').autoHeightTextarea();
对于那些希望textarea在宽度和高度上自动resize的人：
HTML：
<textarea class='textbox'></textarea> <div> <span class='tmp_textbox'></span> </div>
CSS：
.textbox, .tmp_textbox { font-family: 'Arial'; font-size: 12px; resize: none; overflow:hidden; } .tmp_textbox { display: none; }
jQuery的：
$(function(){ //alert($('.textbox').css('padding')) $('.textbox').on('keyup change', checkSize) $('.textbox').trigger('keyup') function checkSize(){ var str = $(this).val().replace(/\r?\n/g, '<br/>'); $('.tmp_textbox').html( str ) console.log($(this).val()) var strArr = str.split('<br/>') var row = strArr.length $('.textbox').attr('rows', row) $('.textbox').width( $('.tmp_textbox').width() + parseInt($('.textbox').css('padding')) * 2 + 10 ) } })
Codepen：
http://codepen.io/anon/pen/yNpvJJ
干杯，
jQuery解决scheme是将textarea的高度设置为“auto”，检查scrollHeight，然后调整textarea的高度，每当textarea改变时（ JSFiddle ）：
$('textarea').on( 'input', function(){ $(this).height( 'auto' ).height( this.scrollHeight ); });
如果你正在dynamic地添加textareas（通过AJAX或其他），你可以在$（document）.ready中添加这个文件，以确保所有具有“autoheight”类的textareas保持与它们的内容相同的高度：
$(document).on( 'input', 'textarea.autoheight', function() { $(this).height( 'auto' ).height( this.scrollHeight ); });
testing并在Chrome，Firefox，Opera和IE中工作。 还支持剪切和粘贴，长词等。
你可以使用这段代码来计算textarea需要的行数：
textarea.rows = 1; if (textarea.scrollHeight > textarea.clientHeight) textarea.rows = textarea.scrollHeight / textarea.clientHeight;
在input和window:resize上计算window:resize事件window:resize以获得自动resize的效果。 Angular示例：
模板代码：
<textarea rows="1" reAutoWrap></textarea>
自动wrap.directive.ts
import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: 'textarea[reAutoWrap]', }) export class AutoWrapDirective { private readonly textarea: HTMLTextAreaElement; constructor(el: ElementRef) { this.textarea = el.nativeElement; } @HostListener('input') onInput() { this.resize(); } @HostListener('window:resize') onChange() { this.resize(); } private resize() { this.textarea.rows = 1; if (this.textarea.scrollHeight > this.textarea.clientHeight) this.textarea.rows = this.textarea.scrollHeight / this.textarea.clientHeight; } }
这是panzi答案的一个angularjs指令。
module.directive('autoHeight', function() { return { restrict: 'A', link: function(scope, element, attrs) { element = element[0]; var resize = function(){ element.style.height = 'auto'; element.style.height = (element.scrollHeight)+'px'; }; element.addEventListener('change', resize, false); element.addEventListener('cut', resize, false); element.addEventListener('paste', resize, false); element.addEventListener('drop', resize, false); element.addEventListener('keydown',resize, false); resize(); } }; });
HTML：
<textarea ng-model="foo" auto-height></textarea>
我在常见的浏览器中testing了脚本，在Chrome和Safari中失败了。 这是因为不断更新的scrollHeightvariables。
我已经使用jQuery应用DisgruntledGoat脚本，并添加了铬修复
function fitToContent(/* JQuery */text, /* Number */maxHeight) { var adjustedHeight = text.height(); var relative_error = parseInt(text.attr('relative_error')); if (!maxHeight || maxHeight > adjustedHeight) { adjustedHeight = Math.max(text[0].scrollHeight, adjustedHeight); if (maxHeight) adjustedHeight = Math.min(maxHeight, adjustedHeight); if ((adjustedHeight - relative_error) > text.height()) { text.css('height', (adjustedHeight - relative_error) + "px"); // chrome fix if (text[0].scrollHeight != adjustedHeight) { var relative = text[0].scrollHeight - adjustedHeight; if (relative_error != relative) { text.attr('relative_error', relative + relative_error); } } } } } function autoResizeText(/* Number */maxHeight) { var resize = function() { fitToContent($(this), maxHeight); }; $("textarea").attr('relative_error', 0); $("textarea").each(resize); $("textarea").keyup(resize).keydown(resize); }
$('textarea').bind('keyup change', function() { var $this = $(this), $offset = this.offsetHeight; $offset > $this.height() && $offset < 300 ? $this.css('height ', $offset) .attr('rows', $this.val().split('\n').length) .css({'height' : $this.attr('scrollHeight'),'overflow' : 'hidden'}) : $this.css('overflow','auto'); });
我可以使用以下jQuery函数在IE9和Chrome中设置TextArea大小。 It binds to the textarea objects from the selector defined in the $(document).ready() function.
function autoResize(obj, size) { obj.keyup(function () { if ($(this).val().length > size-1) { $(this).val( function() { $(this).height(function() { return this.scrollHeight + 13; }); alert('The maximum comment length is '+size+' characters.'); return $(this).val().substring(0, size-1); }); } $(this).height(function() { if ($(this).val() == '') { return 15; } else { $(this).height(15); return ($(this).attr('scrollHeight')-2); } }); }).keyup(); }
In my $(document).ready() function I have the following call for all of my textarea calls on this page.
$('textarea').each( function() { autoResize($(this), 250); });
Where 250 is the character limit on my text area. This will grow as large as the text size will allow (based on your character count and font size). It will also shrink your text area appropriately when you remove characters from your textarea or if the user pastes too much text initially.
I recommend the javascript library from http://javierjulio.github.io/textarea-autosize .
Per comments, add example codeblock on plugin usage:
<textarea class="js-auto-size" rows="1"></textarea> <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> <script src="jquery.textarea_autosize.min.js"></script> <script> $('textarea.js-auto-size').textareaAutoSize(); </script>
Minimum required CSS:
textarea { box-sizing: border-box; max-height: 160px; // optional but recommended min-height: 38px; overflow-x: hidden; // for Firefox (issue #5) }
If scrollHeight could be trusted, then:
textarea.onkeyup=function() { this.style.height=''; this.rows=this.value.split('\n').length; this.style.height=this.scrollHeight+'px'; }
