Tutorial Jquery Membuat Sisa Karakter Pada Tulisan Textarea

02 Nov 2015 22:33 • Post By

Tutorial Jquery Membuat Sisa Karakter Pada Tulisan Textarea

Hai Sahabat tutorialku.net, ketemu lagi bersama saya pria tampan asli Jawa hehe, dah lama nih gak bikin tutorial, tutorial kali ini adalah Menjumlahkan Sisa Character Tulisan 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.

Mungkin kalian pernah melihat di status twitter dimana kita dibatasi untuk menulis jumlah karakter tulisan dan kita akan membuat seperti itu dan mungkin bisa berguna untuk kalian semua. Maka simak baik baik dibawah ini.

1. 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>

2. 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>

3. 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

4. Selesai..
Cuma segitua aja kok bro and amat sangat mudah jika sudah kalian buat sendiri untuk dipasang pada situs kalian yang berbasi informasi seperti forum, sosial media dll..

Oke sekian dulu dari saya semoga bermanfaat..

Jangan lupa Subscribe ya !!

Tutorial Jquery Membuat Sisa Karakter Pada Tulisan Textarea | Tutorialku.Net | 4.5