Tag Archives: auto size

Membuat TextArea Yang Auto Height

Posted on by

Lama ga posting thread,,, :mrgreen:
Thread kali ini membahas tentang bagaimana caranya membuat suatu textarea yang sudah berisi text agar tidak mempunyai border, scrollbar dan yang lebih utama adalah textarea tersebut bisa otomatis menyesuaikan tingginya dengan isi / text yang ada, backgroundnya pun transparan jadi seakan tidak ada textarea 🙂
Pertama mari kita buat file style css nya ( misal beri nama style.css ) dengan sintaks berikut :

.isiTextArea{
	font-family:"Lucida Sans Unicode",Corbel,TrebuchetMS,Verdana,sans-serif;
	font-weight:bold;
	letter-spacing:-1px;
	font-size:24px;
	line-height:1.2em;
	color:#333;
	border:0;
	overflow:auto;
	width:725px;
	background:transparent;
}

Kemudian buat suatu file html ( misal dengan nama index.html ) dengan isi sebagai berikut :

<html>
    <head>
        <title>Coba Text Area</title>
        <script>
        function autoHeightText(){
            var textArea = document.getElementById('textJudulArea');
            if (navigator.appName.indexOf("Microsoft Internet Explorer") == 0){
	        textArea.style.overflow = 'visible';
	        return;
            }

            while (textArea.scrollHeight > textArea.offsetHeight){
	        textArea.rows++;
            }
        }

        window.onload = autoHeightText;
        </script>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
<body>
<textarea readonly id="textJudulArea" class="isiTextArea">isi</textarea>
</body>
</html>

Dan coba jalankan / buka file index.html tadi menggunakan browser yang ada, semoga berhasil dan bermanfaat 🙂

Related Articles