3 варианта подсчета количества введенных символов силами jQuery

еализация задачи подсчета символов в текстовых полях ввода может оказаться очень полезной функцией, которую предоставляет фреймворк jQuery. Подсчет символов можно использовать в местах, где пользователь ограничен длиной вводимого сообщения.

Чтобы использовать jQuery на своих страницах, необходимо подключить его. Сделать это можно двумя способами:

скачать себе файл jquery-1.9.0.min.js с сайта разработчика и подключить его по внутренней ссылке , например:

<script src="jquery-1.9.0.min.js" type="text/javascript"></script>

или выставить в файлах сайта внешнюю ссылку на сервер разработчиков фреймворка, например:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

Ну чтож, с подключнием вроде разобрались, теперь можем приступить к использованию на своих страницах.
Давайте рассмотрим несколько примеров использования счетчика символов.
Первый пример состоит из простой текстовой формы, в которой подсчитывается количество введенных символов. Вот её код:

<script type="text/javascript"> $(function() {     $("input[id='text-count']").keyup(function count(){         number = $("input[id='text-count']").val().length;         $("#count").html("Количество введенных символов: "+number);     }); }); </script> <input type="text" id="text-count"/><span id="count"></span>

Должно получиться как-то так:

Второй пример наоборот подсчитывает, сколько сиволов осталось ввести:

<script type="text/javascript"> $(function(){     $("input[id='text-block']").keyup(function countRemainingChars(){         maxchars = 50;         number = $("input[id='text-block']").val().length;         if(number <= maxchars){             $("#block").html(maxchars-number + " символов осталось");         }         if(number == maxchars) {             $("#text-block").attr({ maxlength: maxchars});         }     }); }); </script> <input type="text" id="text-block"/><span id="block"></span>

В этом коде количество символов ограничивается с помощью значения переменной maxchars, которое в нашем случае равно 50 символам.

Подсчет количества введенных символов силами jQuery

у и последний и самый интересный пример на сегодня представляет собой поле для ввода текстового сообщения. Его можно использовать например для модуля отправки смс с сайта.

Он показывает, сколько осталось ввести символов с помощью симпатичной шкалы.

<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>

Чтобы красиво оформить скрипт, создадим для него таблицу стилей:

#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; } 

Ну и наконец, поместим элемент на страницу, добавив следующие пару строчек в html файл :

<div>     <div id="count">145</div>     <div id="barbox"><div id="bar"></div></div> </div> <textarea id="contentbox"></textarea>

Вот что должно получиться:

На этом все :)

Пожаловаться Подписаться
0 ответов
авторизуйтесь чтобы ответить