Kode Javascript untuk Membersihkan Textarea dan Textbox

Kode Javascript untuk Membersihkan Textarea dan Textbox

Baiklah dalam posting kali ini saya akan membahas mengenai kode javascript untuk membersihkan texarea. Posting ini terispirasi ketika saya memperbaiki halaman HTML Editor blog ini. Pertama-tama kamu perlu memahami disini kita akan menggunakan dua jenis pengkodean, yang pertama adalah HTML dan JavaScript (kita sebut JS), JS merupakan bahasa pemrograman web yang tidak berdiri sendiri, JS digunakan bersama dengan HTML.

Terlebih dahulu kita akan membangun kode HTML nya. Kita memerlukan input textarea dan tombol, tombol untuk membersihkan textarea tersebut. Kira-kira kodenya seperti ini.

<input type="button" value="Clear" onclick="javascript:eraseText();"/> 
<textarea id='output' rows=20 cols=90></textarea>

Bagian yang ditandai tersebut merupakan bagian utama dari "pembersih" input textarea. Jadi kode yang ditandai tersebut bisa kamu letakkan di tempat lain yang kamu inginkan agar ketika di-klik, maka semua teks di textarea akan terhapus. Setelah itu kita pasang fungsi javascript pada kode diatas, kita memerlukan kode javascript seperti berikut ini.

function eraseText() {
    document.getElementById("output").value = "";
}

Perhatikan bagian output. Itu merupakan nama "id" dari input textarea yang ada di atas. Jadi misalnya kamu ingin menggunakannya pada textbox atau yang lain, cukup tambahkan id="output". Lalu kita masukkan kode javascript tersebut kedalam tag script di HTML. Sehingga kode diatas akan menjadi seperti berikut ini.

<script>
function eraseText() {
    document.getElementById("output").value = "";
}
</script>

Selanjutnya kita letakkan kedua kode HTML diatas, sehingga hasil akhirnya akan menjadi seperti kode berikut ini.

<input type="button" value="Clear" onclick="javascript:eraseText();"/> 
<textarea id='output' rows=20 cols=90></textarea>
<script>
function eraseText() {
    document.getElementById("output").value = "";
}
</script>

Sebelum memasang kode HTML tersebut di blog atau website, kamu bisa mencoba menggunakan kode tersebut pada halaman HTML Editor yang merupakan halaman blog ini.

Itulah beberapa langkah yang bisa kamu lakukan untuk membuat tombol pembersih textarea atau textbox dengan menggunakan javascript. Semoga artikel ini bisa bermanfaat. Jika ada hal yang kurang jelas, maka jangan sungkan untuk memberikan komentar di bawah atau melalui halaman contact blog ini. Terima kasih dan sampai jumpa!

Sumber : https://stackoverflow.com/questions/15968911/how-to-clear-text-area-with-a-button-in-html-using-javascript

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel