В некоторых формах необходимо ограничить количество введенных символом пользователем, это зачастую используется в регистрационных формах, где необходимо указать краткое описание. В данном уроке мы рассмотрим как можно подсчитать количество введенных символов, и применить ограничение на заданное количество введенных символом, но это еще не все, также мы немного украсим данную форму, применив к ней индикатор заполнения формы, который будет показывать сколько процентов, от разрешенных символов, вы заполнили.
Этот урок достаточно прост и примитивен, но весьма оказываться весьма полезным в действии. Для начала мы создаем простенькую HTML-разметку, в ней ничего сложно нет, по этому уделять ей особого внимания не требуется:
<div style="height:65px">
<div style="float:left"><b><font color="#0797cd">Подсчитываем введенные в текстовое поле символы.</b><br /><br /></div>
<div id="barbox">
<div id="bar"> </div>
</div>
<div id="count"><font color="#0797cd">50</div>
</div>
<textarea id="contentbox"></textarea>Теперь рассмотрим структуру CSS, из мы будем размещать данные стили между тегами head в файле index.html
body
{
font-family:Arial, Helvetica, sans-serif;
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#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
}Чтобы ускорить загрузку скриптов, мы будем подключать скрипт jQuery с репозитория Google. Затем мы рассмотрим сам JavaScript.
$(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 {
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert('Места больше нет!!!');
}
return false;
});
});
$('#contentbox').keyup(function(){} - contentbox является ID поля ввода текста. С помощью $(this).val() мы получаем значение поля ввода текста. bar - это ID элемента div, который содержит счетчик. $('#bar').animate() изменяет индикатор в соответствии с количеством введенных символов. Материал взят из зарубежного источника - www.9lessons.info/2010/04/live-character-count-meter-with-jquery.html и представлен исключительно в ознакомительных целях.
