Textarea to resize based on content length
You can check the content's height by setting to 1px
and then reading the scrollHeight
property:
function textAreaAdjust(element) {
element.style.height = "1px";
element.style.height = (25+element.scrollHeight)+"px";
}
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>
Creating a textarea with auto-resize
This works for me (Firefox 3.6/4.0 and 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>
How to auto resize the textarea to fit the content?
addEventListener
here is redundant since valueChanges
already notifies you when the field changes. Instead, update the height using the ViewChild
reference myDiv
.
this.myForm.valueChanges.subscribe(value => {
this.myDiv.nativeElement.style.height = 'auto';
this.myDiv.nativeElement.style.height = `${this.myDiv.nativeElement.scrollHeight}px`;
});
Then add overflow: hidden
to your css so the scrollbar doesn't show.
textarea {
resize: horizontal;
overflow: hidden;
}
You can keep the resize: horizontal;
but it is no longer required since the textarea will resize automatically anyway.
Here is a working example on StackBlitz.
Automatically resize text area based on content
http://www.jacklmoore.com/autosize/
Download the plugin first:
Step 1: Put "jquery.autoresize.min.js" where you keep your jquery plugins.
Step 2: Link the file in HTML -> <script src="jquery.autosize.min.js" type="text/javascript" ></script>
Be sure that this link comes after your jquery link, and before your own javascript/jquery code links.
Step 3: In your javascript code file simply add $('#containerToBeResized').autosize();
Is there anyway to have a textarea autofit height based on the content at page load?
How about http://www.jacklmoore.com/autosize/ Drop Autosize into any web page and it should Just Work. The source is short and well commented if you are curious to how it works.
// Example:
$(document).ready(function(){
$('textarea').autosize();
});
Source: https://github.com/jackmoore/autosize
Demo: http://www.jacklmoore.com/autosize/
Textarea Auto height
It can be achieved using JS. Here is a 'one-line' solution using elastic.js:
$('#note').elastic();
Updated: Seems like elastic.js is not there anymore, but if you are looking for an external library, I can recommend autosize.js by Jack Moore. This is the working example:
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="https://rawgit.com/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>
Related Topics
Infinite Scrolling with React Js
How to Make the Browser See CSS and JavaScript Changes
Change Svg Text to CSS Word Wrapping
Set A:Visited Style with JavaScript or Jquery
Css/JavaScript Use Div to Grey Out Section of Page
List Reorder Animation with Angularjs
Jquery + Animate.CSS Animation Only Working Once, Animation Not Resetting
How to Color Specific Letters in HTML Element Text
How to Highlight All Occurrences of a Word on a Page with JavaScript or Jquery
How to Redefine CSS Classes with JavaScript
Impossible to Hide Navigation Bars in Safari iOS 7 for Iphone/Ipod Touch
Determine Maximum Possible Div Height
Get All CSS Styles for a Dom Element (A La Firebug)
How to Detect Linked PDF on a Page and Show Message to Download Adobe Reader Using Jquery
How to Disable a Specific Li Element Inside a Ul
Working with Jquery When There Is No Internet Connection
How to Get the Grid Coordinates of an Element Using JavaScript
Generate Random Element Position and Prevent Overlapping in JavaScript