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 :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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 :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<form method="post" action="">
<textarea name="textarea" style="width:370px; height:100px; overflow-y:hidden;" onkeyup="textareaOtomatis(this,300)">Beberapa Text</textarea>
</form>
<form method="post" action=""> <textarea name="textarea" style="width:370px; height:100px; overflow-y:hidden;" onkeyup="textareaOtomatis(this,300)">Beberapa Text</textarea> </form>
<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