JQuery

Menghitung input karakter meter dengan Jquery

Menghitung input karakter meter dengan Jquery

Dalam posting ini saya ingin menjelaskan bagaimana untuk mengitung input karakter atau kata  menggunakan jQuery. Itu sangat menarik dan hanya sepuluh baris kode javascript. Menggunakannya dan memperkaya aplikasi web Anda dengan jquery.

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

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

 

Javascript code

$('#contentbox').keyup(function(){} - contentbox is the ID of the textbox. 
Menggunakan  $(this).val() mendapatkan nilai text. 
bar adalah div ID untuk menghitung input meter $('#bar').
animate() menaikan width.

 

Jadi ketika kita menginputkan  pada bagian "Comment", maka jumlah karakter yang diinputkan akan diberitahukan. Jika kita ingin merubah jumlah karakter yang diizinkan, pada kode  di bawah ini harus diganti  "50" dirubah dengan jumlah karakter yang kita inginkan.

$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 50);
var count= 50 - box.length;

if(box.length <= 50)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert("Full, can't add more character");
}
return false;
});
});

 

Kode HTML

<div>
<div id="count">50div>
<div id="barbox"><div id="bar">div>div>
div>
<textarea id="contentbox">textarea>

 

Kode CSS

#bar
{
background-color:#5fbbde;
width:0px;
height:16px;
}
#barbox
{
float:right; 
height:16px; 
background-color:#FFFFFF; 
width:100px; 
border:solid 2px #000; 
margin-right:3px;
-webkit-border-radius:5px;-moz-border-radius:5px;
}
#count
{
float:right; margin-right:8px; 
font-family:'Georgia', Times New Roman, Times, serif; 
font-size:16px; 
font-weight:bold; 
color:#666666
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}

 

Share This Post

Leave Comment

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.