Aldonante Restajn Signojn en Tekstareo kun 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
