Подсчёт количества символов в поле на jQuery

В этом посте я хочу объяснить, как делать живой подсчёт символов с  графическим измерителем  с помощью jQuery. Это интересный и простой пример имеет  всего десять строк js-код. Используя его можете  обогатить ваши web-приложения с помощью jQuery.

JavaScript код
$(‘#contentbox’).keyup(function(){} — contentbox является идентификатором текстового поля. С помощью $(this).val() получаем значение текстового поля.
bar является идентификатором графического измерителя количества символов  $(‘#bar’).animate() увеличения ширины.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;

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

});
</script>

Комментарии: