Menghitung sisa karakter dengan Jquery pada Bootstrap - Hallo sahabat Kodenyekrip, Pada Artikel yang anda baca kali ini dengan judul Menghitung sisa karakter dengan Jquery pada Bootstrap, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel Bootstrap,
Artikel Jquery,
Artikel Pemrograman Web, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Menghitung sisa karakter dengan Jquery pada Bootstrap
link : Menghitung sisa karakter dengan Jquery pada Bootstrap
Menghitung sisa karakter dengan Jquery pada Bootstrap
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 :
Langkah-langkah membuat penghitung sisa karakater
1. Membuat navigasi barBagian 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 :
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 :
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>
Demikianlah Artikel Menghitung sisa karakter dengan Jquery pada Bootstrap
Sekianlah artikel Menghitung sisa karakter dengan Jquery pada Bootstrap kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Menghitung sisa karakter dengan Jquery pada Bootstrap dengan alamat link https://kodenyekrip.blogspot.com/2016/12/menghitung-sisa-karakter-dengan-jquery.html
