Tag Archives: textarea

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

Menambahkan text pada di posisi cursor yang aktif di dalam TextArea

Posted on by 
function insertText(myField, myValue) {
	if (document.selection) {
		myField.focus();
		sel = document.selection.createRange();
		sel.text = myValue;
	} else if (myField.selectionStart || myField.selectionStart == '0') {
		var startPos = myField.selectionStart;
		var endPos = myField.selectionEnd;
		myField.value = myField.value.substring(0, startPos)
		+ myValue
		+ myField.value.substring(endPos, myField.value.length);
	} else {
		myField.value += myValue;
	}
}

Penggunaan dari fungsi javascript diatas adalah sebagai berikut :

<a href="javascript:void(0);" onclick="insertAtCursor(document.smsMessage.textareaMessage, '%cust_name%');">%cust_name%</a>
<form name="smsMessage" action="" method="post">
	<textarea name="textareaMessage" cols="30" rows="3"></textarea>
</form>

Counter Text pada Textarea

Posted on by

Hai semua,,, lama juga rasanya tidak posting di blog ini 🙂 . Kehabisan ide buat nuangin kesini, hehe, tapi daripada ndak posting sama sekali di blog ini, kali ini aku posting artikel mengenai bagaimana caranya menghitung jumlah karakter yang kita inputkan pada sebuah textarea menggunakan javascript.

Setiap kali kita mengetikkan karakter atau angka di TextArea, maka fungsi javascript countText() akan selalu menghitung jumlah karakter atau angka yang terisi pada TextArea. Setiap hitungan akan langsung secara otomatis mengisi kolom TextBox (rv_counter) dibawahnya. Pengisian tersebut berupa pengurangan maksimal input keyboard yg didefinisikan dengan variable max = 100 oleh tiap ketikan input keyboard yang kita lakukan. Pada saat jumlah inputan keyboard sama dengan atau lebih besar dari variable max = 100, maka fungsi alert akan ter-eksekusi, namun ini masih berjalan baik pada browser IE & Mozilla, belum aku coba ke browser lainnya contohnya Safari. Continue reading →