Textarea Auto Height According to Content

Textarea Auto Height According to Content : In my current project, I was attempting to discover an approach to auto-resize a textarea as indicated by some substance that would be stacked in powerfully through Ajax. I didn’t have the foggiest idea about the tallness of the substance and the textarea component doesn’t resize normally like other HTML components, so I expected to refresh the stature of the component with JavaScript each time the substance changed.

It appeared to be a basic errand. In the wake of doing a hunt to perceive what sorts of modules and contents were gliding around to do this, the models I discovered appeared to be somewhat excessively perplexing. While most arrangements appeared to join some intricate number-related estimations, I thought about a superior way.

Auto Resize Textarea Height is the best element to fit the enormous substance. This element can make an easy to understand and appealing Textarea Field. It can increment or lessening the tallness of the Textarea field consequently dependent on the length of content.

You can likewise effectively carry out this component with another content field. Along these lines, you will learn here the overall code to use with a book field. It will actually want to grow the stature of the content field consequently at whatever point you enter or glue the substance into it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Days Counter</title>
</head>

<body>
    <div class="container">
        <div class="calendar">
            <div class="result" id="demo">
                <textarea id="Description" name=""></textarea>
            </div>
        </div>
    </div>
</body>
</html>

JavaScript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#Description').text('Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.')
      
  let scrollHeight = $('#Description').prop('scrollHeight');
        let lineHeight = 15;
        let rows = Math.round(scrollHeight / lineHeight);
        console.log('scrollHeght-->' + scrollHeight + 'lineHeight-->' + lineHeight);
        $('#Description').attr('rows', rows);
    });
</script>

See the Pen Text area Auto Height According to Content by Rohit Gautam (@TheRrohitt) on CodePen.

Please follow and like us: