Script untuk TextArea Tinggi Otomatis dengan Javascript


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

Mari Berdiskusi Bersama

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s