1

I have created a textarea dynamically. I have received its content from database. The textarea has fixed width. How to resize it vertically to fit all its content using pure javascript?

let field         = document.createElement('textarea');

field.value       = "Long text received from database";
field.style.width = 650 + "px";

Now, how to set height of the field so that all of its content is just visible?

Adam Azad
  • 11,171
  • 5
  • 29
  • 70
Sukanta Manna
  • 19
  • 4

2 Answers2

1

Here a solution, maybe it's not the best. The idea is checking if the element has a scrollbar, while the element has a scroll we add pixels till there is no scroll.

var textarea = document.getElementById('myTextArea');

var hasVerticalScrollbar = textarea.scrollHeight > textarea.clientHeight;

while(textarea.scrollHeight > textarea.clientHeight){
textarea.style.height = textarea.offsetHeight + 10 +'px' ;
}

Full example here https://jsfiddle.net/sgtac43o/

Emeeus
  • 5,072
  • 2
  • 25
  • 37
  • After execution of line field.value = "Long text received from database";, height and width properties of field are zero. field.clientHeight = 0, field.scrollHeight = 0 and field.offsetHeight=0. – Sukanta Manna May 11 '18 at 14:58
  • @SukantaManna add document.body.appendChild(field); or similar, here the full example https://jsfiddle.net/sgtac43o/ – Emeeus May 11 '18 at 15:12
  • let textAreas = div1.childDiv.getElementsByTagName('textarea'); for (let i=0; i – Sukanta Manna May 12 '18 at 05:33
0

This may also be a workaround, dynamically create a div with all same css properties of textarea and take the height of it and set the height to that textarea with some buffer and remove the div.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height, viewport-fit=cover">
    <title>Highlight Text while typeing in input box</title>
    <style>
        body * {
            box-sizing: border-box;
            font-family: verdana;
        }
        .ta {
            width: 600px;
            min-height: 150px;
            padding: 10px;
            font-size: 13px;
            font-family: verdana;
        }

        .invisibleDiv {
            width: 600px;
            min-height: 150px;
            padding: 10px;
            position: absolute;
            bottom: 0;
            left: 0;
            font-size: 13px;
            font-family: verdana;
            opacity: 0;
        }
    </style>
</head>
    <body>

        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
        <textarea class="ta"></textarea>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
        <script type="text/javascript">
            var longPara = $('p').text();
            var apprxHeight = 0;
            var invisibleDiv = $( "<div/>", {
                html: longPara,
                "class": 'invisibleDiv'
            })

            $.when($('body').append(invisibleDiv)).done(function() {
                var apprxHeight = getHeight();
            });

            function getHeight() {
                apprxHeight = $('.invisibleDiv').innerHeight() + 10;
                $('.ta').innerHeight(apprxHeight).val(longPara);
                $('.invisibleDiv').remove();
            };

        </script>
    </body>
</html>

You can check here https://codepen.io/silabhijit/pen/xjjgyv You also can replace textarea with editable div.

Abhijit Sil
  • 191
  • 4