Текстовое поле с лимитом вводимых символов
и прогресс баром
Если у Вас на сайте имеются текстовые поля, в которые посетители могут вводить информацию, то неплохо было бы добавить к ним прогресс бар, показывающий, сколько процентов использовано от дозволенной максимальной длины данного поля. Данная функция может быть очень полезна в том случае, если введенный текст все равно обрежется на стороне сервера до указанной длины.
Ниже расположено текстовое поле с ограничением в 20 символов:
Для наглядности можно использовать и свой собственный блок с заданным стилем, который можно расположить отдельно от заполняемого текстового поля:
Для создания на своем сайте подобного текстового поля с ограниченным количеством вводимых символов и прогресс баром, показывающим, сколько процентов от допустимой длины уже использовано, добавьте данный 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(0, limit);
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>Текстовое поле, к которому применяется ограничение на количество вводимых символов с информативным прогресс баром, следует оформить следующим образом:
<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 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>Теперь пользователи, заполняющие какие-либо текстовые поля на Вашем сайте, смогут наглядно наблюдать, сколько процентов от допустимой длины поля они задействовали. Также они будут знать, что отправленные ими данные дойдут до адресата целиком, а не в обрезанном виде.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
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, Ошибки нет, все отображается, но не работает...
Заранее благодарен.
Заранее благодарен.
А в CSS добавьте стиль: #prog_bar>span{ margin: 0 0 0 5px; }
document.getElementById(id).innerHTML=" " + percent + "%";
указывая n число раз, сколько нужно отступить, но через css лучше, можно сдвинуть по px.
Например: необходимо напечатать еще 15%.