Artikel pada hari ini kita akan mencoba membuat sebuah form input dalam hal ini textarea, dimana pada form textarea tersebut kita batasi jumlah karakternya dan tidak boleh lebih dari jumlah yang sudah ditentukan.
Biasanya kita menjumpai pada kolom sebuah komentar, tentunya bertujuan agar jumlah karakter yang diinputkan lebih efisien.
Caranya cukup mudah, teman-teman bisa mulai membuat sebuah file, kemudian untuk source codenya sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<title>Limit Character Textarea | Kursus Web YELLOWWWEB.ID</title>
<style type="text/css">
.red{
color:red;
font-weight: bold;
}
textarea {
resize:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="" method="">
<textarea class="form-control input-sm" type="textarea" id="message" placeholder="Tulis disini" maxlength="150" rows="8"></textarea>
<p id="characterLeft" class="help-block ">Jumlah karakter melebihi sudah batas!</p>
<br style="clear:both">
<button id="btnSubmit" name="btnSubmit" type="submit" style="height:35px"> Kirim </button>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#characterLeft').text('150 characters left');
$('#message').keydown(function () {
var max = 150;
var len = $(this).val().length;
if (len >= max) {
$('#characterLeft').text('Jumlah karakter melebihi sudah batas!');
$('#characterLeft').addClass('red');
$('#btnSubmit').addClass('disabled');
} else {
var ch = max - len;
$('#characterLeft').text(ch + ' Charater Left');
$('#btnSubmit').removeClass('disabled');
$('#characterLeft').removeClass('red');
}
});
});
</script>
</body>
</html>
disini perlu kita perhatikan, untuk aktivasi javascriptnya mengingat saat ini kita menggunakan jQuery
<script type="text/javascript">
$(document).ready(function(){
$('#characterLeft').text('150 characters left');
$('#message').keydown(function () {
var max = 150;
var len = $(this).val().length;
if (len >= max) {
$('#characterLeft').text('Jumlah karakter melebihi sudah batas!');
$('#characterLeft').addClass('red');
$('#btnSubmit').addClass('disabled');
} else {
var ch = max - len;
$('#characterLeft').text(ch + ' Charater Left');
$('#btnSubmit').removeClass('disabled');
$('#characterLeft').removeClass('red');
}
});
});
</script>
Hasilnya bisa kalian lihat seperti berikut ini: