Новости Скрипты Онлайн сервисы Хитрости Гостевая книга Статистика сайта Реклама на сайте
UsefulScript.ruСкриптыРазныеТекстовое поле с лимитом
2
13

Текстовое поле с лимитом вводимых символов
и прогресс баром

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


Ниже расположено текстовое поле с ограничением в 20 символов:



Limit:0%

Для наглядности можно использовать и свой собственный блок DIV с заданным стилем, который можно расположить отдельно от заполняемого текстового поля:


Использовано:0%

Для создания на своем сайте подобного текстового поля с ограниченным количеством вводимых символов и прогресс баром, показывающим, сколько процентов от допустимой длины Вы уже использовали, добавьте данный JavaScript код на свою страничку:

JavaScript код:
<script type="text/javascript">
function 
text_limit(field,id,limit) {
var 
fieldWidth=parseInt(field.offsetWidth);
var 
count_char=field.value.length;

if (
count_char>limit) {
 
field.value=field.value.substring(0limit);
 
text_limit(field,id,limit);
}
else {
 var 
percent=parseInt(100-((limit-count_char)*100)/limit);
 
document.getElementById(id).style.width=parseInt((fieldWidth*percent)/100)+"px";
 
document.getElementById(id).innerHTML="Limit:"+percent+"%";

 
//Для использования своего собственного блока DIV
 
document.getElementById("id1").style["width"]=parseInt((500*percent)/100)+"px";
 
document.getElementById("id1").innerHTML="Использовано:"+percent+"%";
}
}
</script>

Текстовое поле, к которому применяется ограничение на количество вводимых символов с информативным прогресс баром, следует оформить следующим образом:

HTML код:
<textarea rows="5" cols="40" onKeyDown="text_limit(this,'prog_bar',20)"
onKeyUp="text_limit(this,'prog_bar',20)" onFocus="text_limit(this,'prog_bar',20)">
</
textarea>

<
div id="prog_bar" style="width:1px; height:14px; color:silver;
font-size:12px; background-color:green;"
>Limit:0%</div>

<!--
Код второго блока DIV-->
<
div align="left" style="border: 1px solid #4874a3; width:500px; height:20px;
background:#f5f5f5; color:silver; margin-left:30px;"
>
 <
div id="id1" style="width:0%; height:20px; background:blue;">Использовано:0%</div>
</
div>

Теперь пользователи, заполняющие какие-либо текстовые поля на Вашем сайте, смогут наглядно наблюдать, сколько процентов от допустимой длины поля они использовали. Так же они будут знать, что отправленные ими данные дойдут до адресата целиком, а не в обрезанном виде.


Дата создания: 22:20:36 15.08.2012 г.
Дата обновления: 22:20:36 15.08.2012 г.
Посещений темы: 2298 раз(а).

Комментарии посетителей (всего 8 шт.):
Стас
0
# 1838
(07:18:40  29.08.2014 г.)

А можно узнать, как сделать тоже самое, только считались бы символы, а не проценты?
Ответить

Administrator
1
# 1839
(09:54:55  29.08.2014 г.)

Символы и так считаются (в переменной count_char), т.к. это необходимо для расчета процентов. Для вывода количества символов используйте: document.getElementById(id).innerHTML="Limit:"+count_char+"%";
Ответить

Виталий
0
# 3462
(12:29:51  27.09.2016 г.)

Доброе время суток, имеется форма отправки на php, пытался адаптировать данный код, но не работает, посмотрите где может быть ошибка.
echo '<textarea name="form_text" onkeydown="text_limit(this,'prog_bar',20)" onkeyup="text_limit(this,'prog_bar',20)" onfocus="text_limit(this,'prog_bar',20)">'.$_SESSION[user_form_text].'</textarea>';
echo '<div id="prog_bar" style="width:1px; height:14px; color:silver;font-size:12px; background-color:green;">Limit:0%</div>';

При таком раскладе выдается ошибка:
Parse error: syntax error, unexpected T_STRING, expecting ',' or ';'
Одинарные кавычки менял на двойные для prog_bar, Ошибки нет, все отображается, но не работает...
Заранее благодарен.
Ответить

Administrator
0
# 3468
(23:24:16  27.09.2016 г.)

Обычная ошибка синтаксиса. Заэкранируйте обратным слэшем одинарные кавычки для prog_bar: \'prog_bar\'
Ответить

Виталий
0
# 3472
(12:56:34  28.09.2016 г.)

Спасибо, все работает. Подскажите еще пожалуйста, как проценты в прогресс баре сместить вправо к примеру на 5 px, margin и padding не срабатывают, можно высоту задать меняя высоту, а вот как сместить вправо, пока не разобрался, хотел бы дать небольшой отступ, чтобы не "прилипал", в коде js как-то можно поправить?
Заранее благодарен.
Ответить

Administrator
0
# 3476
(22:49:49  28.09.2016 г.)

Можно и через CSS. Вместо: "Limit:0%" сделайте "<span>Limit:0%</span>".
А в CSS добавьте стиль: #prog_bar>span{ margin: 0 0 0 5px; }
Ответить

Виталий
0
# 3478
(06:57:58  29.09.2016 г.)

Здравствуйте, работает, можно через jQuery
document.getElementById(id).innerHTML="&nbsp;"+percent+"%";
указывая n число раз, сколько нужно отступить, но через css лучше, можно сдвинуть по px.
Ответить

Стас
0
# 1842
(05:39:57  30.08.2014 г.)

Спасибо, всё получилось, правда я немного совместил с другим, ограниченное количество обратным отсчетом считалось в виде цифр, а индикатор чуть ниже наоборот заполнялся. Отличный сайт, нашел много полезного.
Ответить

Закрыть
Ваше имя:
135 + 5 =
Добавить комментарий к теме:
Ваше имя:
135 + 5 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Мешает ли Вам реклама на нашем сайте?


Mail.ru LiveInternet