Script untuk TextArea Tinggi Otomatis dengan Javascript

Posted on by

Script ini digunakan untuk membuat textarea yang meninggi secara otomatis saat kita menulis artikel / kalimat yang barisnya lebih dari tinggi maksimal dari textarea itu sendiri. Ini menggunakan JavaScript, yang mana nantinya fungsi ini aktif ketika kita mengetik pada textarea terpilih. Ok, untuk source codenya silahkan lihat dibawah ini :

Fungsi JavaScript, taruh di bagian <head></head> adalah sebagai berikut :

<script type="text/javascript">
function textareaOtomatis(f, tinggiMaksimal) {
	// set untuk tinggi maksimal textarea
	var tinggiMaksimal = (typeof tinggiMaksimal == 'undefined') ? 1000 : tinggiMaksimal;
	// pencegahan jika tinggi = tinggi minimal yang ditentukan
	// maka textarea tidak akan berubah tingginya
	if (f.scrollHeight > tinggiMaksimal) {
		if (f.style.overflowY != 'scroll') { f.style.overflowY = 'scroll' }
		return;
	}
	// agar scroller bar tidak nampak
	if (f.style.overflowY != 'hidden') { f.style.overflowY = 'hidden' }

	var scrollH = f.scrollHeight;
	if( scrollH > f.style.height.replace(/[^0-9]/g,'') ){
		f.style.height = scrollH+'px';
	}
}
</script>

Kemudian, untuk pengujiannya silahkan gunakan sintaks textarea dengan HTML sebagai berikut :

<form method="post" action="">
<textarea name="textarea" style="width:370px; height:100px; overflow-y:hidden;" onkeyup="textareaOtomatis(this,300)">Beberapa Text</textarea>
</form>

Untuk contohnya secara langsung, silahkan kunjungi link berikut : http://www.xeongas.com/test.php

Related Articles

One thought on “Script untuk TextArea Tinggi Otomatis dengan Javascript”

Leave a Reply