Teknik Hitung Mundur Maksimal Karakter Yang Diinputkan

Ada temen yang tanya “ bagaimana menghitung mundur jumlah text yang telah kita ketikan seperti yang ada pada kampus.unikom.ac.id “. Saat itu saya bingung maksudnya apa? apa itu kampus.unikom.ac.id ? Maklum kurang update masalah kampus sendiri…hehe

Setelah dijelaskan lebih rinci lagi,,baru kebayang sama twitter. Owh,,,;)

Jadi kalau kita ketikan karakter pada inputan,,secara langsung menghitung mundur jumlah karakter maksimal yang telah disetting. Kalau lebih dari karakter maksimal, kita tidak bisa lagi mengetikan karakter. Ya twitter banget deh,,:)

Dari situ dapat kita tangkep logikanya.

  1. Ambil karakter pada input area yang diketikan user,
  2. lalu hitung jumlah karakternya dan
  3. kurangi karakter maksimal dengan jumlah yang diketikan user.
  4. Lalu tampilkan…

Langsung aja deh kita coding,,eits pake javascript biar cepet eksekusinya…

<html>
<head>
<title>ad1putr4</title>
	<script language='javascript'>
		function Hitung(){

			var curText = document.formAdiputra.textAdiputra.value.length;

			var maxText = 20;

			var sisa = maxText - curText;

			var isi = document.getElementById('adiputra');
			isi.innerHTML = sisa + ' Huruf';

		}
	</script>
</head>
<body>
<center>
<form name='formAdiputra'>
	<input type='text' size='30' name='textAdiputra' onKeyUp='Hitung()' maxlength='20'>
</form>
<br>
<p align='center' id='adiputra'>
20 Huruf
</p>
</center>
</body>
</html>

Kalau kita run code diatas, akan menampilkan seperti gambar dibawah ini :

Coba saya jelaskan point penting tentang codenya ya :

  1. Lihat event onKeyUp pada input text.
    Event tersebut memanggil fungsi Hitung() dimana fungsi Hitung() tersebut isinya kurang lebih adalah 4 logika diatas. Yang penting adalah ngerti kapan event onKeyUp terjadi. Tentang event onKeyUp bisa dilihat di halaman ini.
  2. Logika pertama dan kedua secara bersamaan dieksekusi pada kode ini

    var curText = document.formAdiputra.textAdiputra.value.length;

    formAdiputra adalah nama form,
    textAdiputra adalah nama input text,
    value adalah isi dari input text,
    length adalah fungsi hitung karakter.
    Semua disimpan di variable curText.

  3. Logika ketiga dilakukan di kode ini

    var sisa = maxText – curText;

    maxText adalah jumlah maksimal dari karakter
    sisa adalah sisa jumlah karakter dari perhitungan minus antara maxText dengan curText

  4. Setelah itu tinggal lakukan logika terakhir,,ayu tampilkan…

    var isi = document.getElementById(‘adiputra’);
    isi.innerHTML = sisa + ‘ Huruf’;

    var isi memiliki value dari element web yang memiliki id=adiputra, coba liat di element paragraph tag <p>. getElementById adalah salah satu cara pengeksekusian dari elemen web (Document Object Model). Dan InnerHTML adalah property dari DOM yang fungsinya mengubah text dari element web yang mau kita ubah. Jadi langsung deh tampilin sisa karakter pada element tag <p>.

  5. Tambahannya, karakter tidak bisa diinputkan lagi kalau jumlah karakter sama dengan maxlength pada input text. Terlihat bahwa maxlength pada code diatas adalah 20.

Sampai sini saya kira cukup jelas,,moga ada manfaatnya..

4 thoughts on “Teknik Hitung Mundur Maksimal Karakter Yang Diinputkan

  1. @ damai : yg ditutor ini juga membahas tentang pembatasan jumlah karakter yg diinput sm user mas,,

    coba mas jalankan code diatas…batasan penulisan karakter diatas cuma 20…

    moga bisa dimengerti..:)

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s