Membatasi Jumlah Karakter Textarea

Publish Date : 12-10-2017 , dibaca 10164 kali, Hari ini dibaca : 1 kali ,0 comments

How to Limit Input Textarea ? ... Ya.. Cara Membatasi Jumlah Karater di Textarea ini merupakan tutorial ke 3 dari kategori Javascript Jquery Suckittrees dot com, Membatasi Input Textarea di berbagai aplikasi Perlu dilakukan untuk mencegah input yang berlebihan oleh user, Hal ini dilakukan untuk membuat data yang tersimpan lebih optimal, sesuai dengan kebutuhan ,

Berikut ini cara yang dapat dilakukan untuk Membatasi Input pada Textarea :

<script language=JavaScript>
function check_length(my_form)
{
maxLen = 50; // max number of characters input
if (my_form.my_text.value.length >= maxLen) {
// Alert message if maximum limit is reached. 
// If required Alert can be removed. 
var msg = "You have reached your maximum limit of characters allowed";
alert(msg);
// Reached the Maximum length so trim the textarea
	my_form.my_text.value = my_form.my_text.value.substring(0, maxLen);
 }
else{ // Maximum length not reached so update the value of my_text counter
	my_form.text_num.value = maxLen - my_form.my_text.value.length;
}
}
</script>

Untuk Kode HTML textarea yaitu :

<html>
<body>

<form name=my_form method=post>
<textarea onKeyPress=check_length(this.form); onKeyDown=check_length(this.form); 
 name=my_text rows=4 cols=30></textarea>
    <br>                               
<input size=1 value=50 name=text_num> Characters Left
</form>

</body>
</html>

Ok.. Sampai disini silahkan anda jalankan dengan browser anda. Dan untuk demo silahkan lihat disini

UPDATE :

atau dengan script lain

<html>
<head>
<script>
$(document).ready(function() {
    var text_max = 99;
    $('#textarea_feedback').html(text_max + ' characters remaining');

    $('#textarea').keyup(function() {
        var text_length = $('#textarea').val().length;
        var text_remaining = text_max - text_length;

        $('#textarea_feedback').html(text_remaining + ' characters remaining');
    });
});
</script>
</head>
<body>

<form name=my_form method=post>
<textarea id="textarea" rows="8" cols="30" maxlength="99" ></textarea>
<div id="textarea_feedback"></div>
</form>

</body>
</html>