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>
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>
Textarea auto-height-increase
You really need js to do this, see example below:
var textarea = document.getElementById("textarea");var limit = 80; //height limit
textarea.oninput = function() { textarea.style.height = ""; textarea.style.height = Math.min(textarea.scrollHeight, limit) + "px";};
textarea { width: 100%;}
<textarea id="textarea"></textarea>
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.
textarea auto height if value is set programatically
Besides @Rory McCrossan's answer, as you already define an input event, I suggest triggering the input after you click the button.
$('.btx').on('input', function(){
$(this).css('height', 'auto').height(this.scrollHeight + 'px');
});
$('button').on('click', function(){
$('.btx').val("lorem\nipsum\ndolor\nsit\namet");
$('.btx').trigger('input');
});
.btx{
display:block;
width:100%;
resize:none;
padding:9px 20px;
line-height:25px;
font-family:courier;
overflow:hidden;
background:orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<textarea class='btx'></textarea>
Jquery textarea auto grow and reduce
The trick here is to set the height of the textarea to the scrollHeight of the element when it has a height of around 0px everytime the user inputs into the textarea.
We can add another if
statement to check whether the textarea is empty. If it is, set the height to its initial height.
$(document).ready(function() {
let txtArea = $('.textAreaGrow');
txtArea.on('input', updateHeight);
function updateHeight() {
let t = txtArea;
if (t.val().trim() == "") {
t.css('height', '4.2em');
} else {
t.css('height', '0.1px');
t.css('height', t[0].scrollHeight);
}
}
updateHeight();
})
.textAreaGrow {
height: 4.2rem;
max-height: 7.7rem;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="textAreaGrow">Preloaded text
With newlines too??</textarea>
how to build a auto height textarea
Try this... This will help...ok
var app = angular.module('myApp', []);
app.controller('AppCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
// Load the data $http.get('http://www.corsproxy.com/loripsum.net/api/plaintext').then(function(res) { $scope.loremIpsum = res.data; $timeout(expand, 0); });
$scope.autoExpand = function(e) { var element = typeof e === 'object' ? e.target : document.getElementById(e); var scrollHeight = element.scrollHeight - 60; // replace 60 by the sum of padding-top and padding-bottom element.style.height = scrollHeight + "px"; };
function expand() { $scope.autoExpand('TextArea'); } }]);
body { background: #43434B; padding-top: 100px;}textarea { height: auto; max-width: 600px; color: #999; font-weight: 400; font-size: 30px; font-family: 'Ubuntu', Helvetica, Arial, sans-serif; width: 100%; background: #fff; border-radius: 3px; line-height: 2em; border: none; box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); padding: 30px; -webkit-transition: height 2s ease; -moz-transition: height 2s ease; -ms-transition: height 2s ease; -o-transition: height 2s ease; transition: height 2s ease;}* { -webkit-font-smoothing: antialiased !important;}
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400' rel='stylesheet' type='text/css'><div ng-app="myApp"> <div ng-controller="AppCtrl" align="center"> <textarea id="TextArea" ng-model="loremIpsum" ng-keyup="autoExpand($event)" placeholder="This is an auto expanding textarea with just angularjs ... try typing something."> </textarea> </div></div>
Related Topics
How to Get the Data-Id Attribute
How to Read CSS Rule Values With JavaScript
Maximum Call Stack Size Exceeded Error
Jquery Mobile: Markup Enhancement of Dynamically Added Content
How to Get the Selected Radio Button'S Value
Submit Two Forms With One Button
What Does "./" (Dot Slash) Refer to in Terms of an HTML File Path Location
Get File Size, Image Width and Height Before Upload
Jquery Document.Createelement Equivalent
How to Communicate Between Iframe and the Parent Site
How to Get the Body'S Content of an Iframe in JavaScript
How to Retrieve an HTML Element'S Actual Width and Height
Jquery Get Selected Option from Dropdown
Convert Json Data to a HTML Table
Prevent Refresh of Page When Button Inside Form Clicked