Membatasi jumlah inputan form dan menghitung sisa inputan

Berikut script php, html untuk membatasi jumlah inputan form serta menampilkan sisa character inputan.

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

            var curText = document.frasalbagus.txtasalbagus.value.length;


            var maxText = 20;

            var sisa = maxText - curText;

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

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


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.frasalbagus.txtasalbagus.value.length;
    frasalbagus adalah nama form,
    txtasalbagus 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(‘asalbagus’);
    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.

Artikel Terkait



0 komentar:

Posting Komentar

Jadilah pengunjung yang aktif, komentar anda sangat berarti.