Pusat Ilmu Secara Detil

Menghitung sisa karakter dengan Jquery pada Bootstrap

Menghitung sisa karakter dengan Jquery pada Bootstrap

Tutorial pemrograman web kita kali ini akan menengahkan tentang pembahasan bagaimana caranya menghitung sisa karakter yang diinput pada textarea.

Terkadang dalam mengdevelop sebuah web, ada bagian-bagian tertentu dari sebuah inputan perlu dibatasi. Misalnya kita akan membatasi jumlah karakter yang diizinkan pada bagian deskripsi diri.

Nah, beranjak dari kebutuhan terhadap pembatasan karakter tersebut, disini kita akan menggunakan bantuan sebuah librari javascript yang berfungsi untuk menghitung jumlah karakter yang diinput. Yang perlu diingat, bagian spasi juga dianggap bagian dari karakter.

Adapun ouput atau hasil akhir dari tutorial kali ini, ditunjukkan oleh Gambar.1 dibawah ini :
(Gambar.1 )

Langkah-langkah membuat penghitung sisa karakater

1. Membuat navigasi bar
Bagian ini bukanlah inti dari tutorial kali ini. Namun karena kita akan membuat seperti yang ditunjukkan oleh Gambar.1, maka tahapan pembuatan navigasi bar kita ikut sertakan:
<div class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.html">
			Pusat Ilmu Secara Detil</a>
		</div>
		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-left">
				<li class="clr1 active"><a href="index.html">Home</a></li>
				<li class="clr2"><a href="">Programming</a></li>
				<li class="clr3"><a href="">English</a></li>
			</ul>
		</div>
	</div>
</div>

Tahapan ini akan menghasilkan ouput untuk bagian navigasi barnya saja seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
(Gambar.2 )

Pada navbar seperti yang dihasilkan oleh Gambar.2, kita melakukan modifikasi navbar-default. File dari modifikasi tersebut disertakan pada link download.

2. Membuat textarea dan penghitung karakter
Langkah kedua ini, kita akan membuat dua inputan dimana yang pertama berisikan untuk inputan "nama" dan yang kedua berisikan "Deskripsi diri". Kode ini diletakkan setelah kode navbar :
<div class="container">
	<div class="row">
		<div class="col-md-5"
			<form>
				<div class="form-group">
					<label>Nama:</label>
					<input type="text" name="name" class="form-control" >
				</div>
				<div class="form-group">
					<label>Deskripsi diri:</label>
					<textarea class="form-control" maxlength="150" style="height:125px"></textarea>
				</div>
				<div class="form-group">
					<button class="btn btn-success">Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">
	$('textarea').maxlength({
		  alwaysShow: true,
		  threshold: 10,
		  warningClass: "label label-success",
		  limitReachedClass: "label label-danger",
		  separator: ' out of ',
		  preText: 'You write ',
		  postText: ' chars.',
		  validate: true
	});
</script>

Output dari kode diatas akan menghasilkan interface yang ditunjukkan oleh Gambar.3 dibawah ini :
(Gambar.3 )


Jadi ketika kita menginputkan  pada bagian "Deskripsi diri", maka jumlah karakter yang diinputkan akan diberitahukan. Jika kita ingin merubah jumlah karakter yang diizinkan, pada kode maxlength="150" dirubah dengan jumlah karakter yang kita inginkan.

Source code lengkap


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="ilmu-detil.blogspot.com">
	<title>Tutorial Autocomplete</title>
	<link rel="stylesheet" href="assets/css/bootstrap.css">
	<link rel="stylesheet" href="assets/css/ilmudetil.css">
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-maxlength/1.7.0/bootstrap-maxlength.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.html">
			Pusat Ilmu Secara Detil</a>
		</div>
		<div class="navbar-collapse collapse">
			<ul class="nav navbar-nav navbar-left">
				<li class="clr1 active"><a href="index.html">Home</a></li>
				<li class="clr2"><a href="">Programming</a></li>
				<li class="clr3"><a href="">English</a></li>
			</ul>
		</div>
	</div>
</div>
</br></br></br></br>

<div class="container">
	<div class="row">
		<div class="col-md-5"
			<form>
				<div class="form-group">
					<label>Nama:</label>
					<input type="text" name="name" class="form-control" >
				</div>
				<div class="form-group">
					<label>Deskripsi diri:</label>
					<textarea class="form-control" maxlength="150" style="height:125px"></textarea>
				</div>
				<div class="form-group">
					<button class="btn btn-success">Submit</button>
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">
	$('textarea').maxlength({
		  alwaysShow: true,
		  threshold: 10,
		  warningClass: "label label-success",
		  limitReachedClass: "label label-danger",
		  separator: ' out of ',
		  preText: 'You write ',
		  postText: ' chars.',
		  validate: true
	});
</script>
</body>
</html>

Share this:

Related Posts
Disqus Comments