Menjumlahkan Sisa Character di Textarea dengan Jquery

Hai All, ketemu lagi bersama saya pria tampan asli sunda hehe, dah lama nih gak bikin tutorial, tutorial kali ini adalah Menjumlahkan Sisa Character di Textarea dengan Jquery, Kadang kita mungkin ingin mengalokasikan jumlah karakter pada textarea, dan kita juga ingin menampilkan karakter yang tersisa dalam textarea, dan bagaimana mencegah pengguna mengetik lebih lanjut setelah mencapai batas karakter ? ini sangat sederhana dan menyenangkan dengan jQuery.

Ok langsung saja, sekarang kita buat file html baru dan masukan seperti dibawah ini :

<!DOCTYPE html>
<html lang="en">
 
<head>
 
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="Keywords" content="Menjumlahkan Character di Textarea dengan Jquery">
 <meta name="Description" content="Menjumlahkan Character di Textarea dengan Jquery">
 <meta name="author" content="">
 
 <title>Menjumlahkan Sisa Character di Textarea dengan Jquery</title>
 
</head>
 
<body>
 
 <h4>Menjumlahkan Sisa Character di Textarea dengan Jquery</h4>
 <textarea name="jmltextarea" id="jmltextarea" cols="45" rows="5"></textarea><br />
 <span name="jmlchars" id="jmlchars"></span> Karakter yang tersisa
 
 
</body>
 
</html>

lalu setelah itu kita copy paste jquery nya sebelum </body> seperti dibawah ini

<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
	$(document).ready(function(){
    var jumlahChars      = 100; //Jumlah karakter yang diizinkan di textarea
    var countTextBox    = $('#jmltextarea') // Textarea input box
    var charsCountEl    = $('#jmlchars'); // Sisa karakter yang dihitung akan ditampilkan di sini
 
    charsCountEl.text(jumlahChars); //nilai awal elemen countchars
    countTextBox.keyup(function() { //pengguna melepaskan tombol pada keyboard
        var thisChars = this.value.replace(/{.*}/g, '').length; //get chars count di textarea
        if(thisChars > jumlahChars) //Jika melebihi karakter dari yang kita tentukan 
        {
            var CharsToDel = (thisChars-jumlahChars); // delete kata yang melebihi batas
            this.value = this.value.substring(0,this.value.length-CharsToDel); //menghilangkan kelebihan karakter pada textarea
        }else{ //jika tidak maka
            charsCountEl.text( jumlahChars - thisChars ); //Jumlahkan sisa karakter
        }
    });
});
	</script>

Perhatikan  #jmltextarea   &   #jmlchars   di ambil dari form diatas yang berfungsi untuk menjumlahkan sisa karakter pada textarea.

 <textarea name="jmltextarea" id="jmltextarea" cols="45" rows="5"></textarea><br />
 <span name="jmlchars" id="jmlchars"></span> Karakter yang tersisa

nah sekarang tinggal jalan kan deh, jika berhasil maka akan seperti demo dibawah ini

DEMO   |   DOWNLOAD

Nah selesai deh, apabila ada yang mau ditanyakan silahkan comment.

Happy Coding & Programing

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

Hubungi Saya