4258
- 0
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css html
Сегодня на форуме задали вопрос "как установить минимальное кол-во символов для описания новости." Сначала подумал скриптом тем более подобного много в интернете,потом вспомнил про HTML5 ну и решил выложить и у себя как это сделать.
И так приступим
1.Для начала я решил поставить счетчик символов в наше текстовое поле ,идем в директорию /engine/skins/default/tpl/news и открываем файл add.tpl
2.Там в самом начале файла скрипты и вот этот
Код:
<script type="text/javascript">
//
// Global variable: ID of current active input area
{% if (flags.edit_split) %}var currentInputAreaID = 'ng_news_content_short';{% else %}var currentInputAreaID = 'ng_news_content';{% endif %}
function ChangeOption(optn) {
document.getElementById('maincontent').style.display = (optn == 'maincontent')?"block":"none";
document.getElementById('additional').style.display = (optn == 'additional')?"block":"none";
document.getElementById('attaches').style.display = (optn == 'attaches')?"block":"none";
}
function approveMode(mode) {
document.getElementById('approve').value = mode;
return true;
}
function preview(){
var form = document.getElementById("postForm");
if (form.ng_news_content{% if (flags.edit_split) %}_short{% endif %}.value == '' || form.title.value == '') {
alert('{{ lang.addnews['msge_preview'] }}');
return false;
}
form['mod'].value = "preview";
form.target = "_blank";
form.submit();
form['mod'].value = "news";
form.target = "_self";
return true;
}
function changeActive(name) {
if (name == 'full') {
document.getElementById('container.content.full').className = 'contentActive';
document.getElementById('container.content.short').className = 'contentInactive';
currentInputAreaID = 'ng_news_content_full';
} else {
document.getElementById('container.content.short').className = 'contentActive';
document.getElementById('container.content.full').className = 'contentInactive';
currentInputAreaID = 'ng_news_content_short';
}
}
</script>
Код:
<script type="text/javascript">
//
// Global variable: ID of current active input area
{% if (flags.edit_split) %}var currentInputAreaID = 'ng_news_content_short';{% else %}var currentInputAreaID = 'ng_news_content';{% endif %}
function ChangeOption(optn) {
document.getElementById('maincontent').style.display = (optn == 'maincontent')?"block":"none";
document.getElementById('additional').style.display = (optn == 'additional')?"block":"none";
document.getElementById('attaches').style.display = (optn == 'attaches')?"block":"none";
}
function approveMode(mode) {
document.getElementById('approve').value = mode;
return true;
}
function preview(){
var form = document.getElementById("postForm");
if (form.ng_news_content{% if (flags.edit_split) %}_short{% endif %}.value == '' || form.title.value == '') {
alert('{{ lang.addnews['msge_preview'] }}');
return false;
}
form['mod'].value = "preview";
form.target = "_blank";
form.submit();
form['mod'].value = "news";
form.target = "_self";
return true;
}
function changeActive(name) {
if (name == 'full') {
document.getElementById('container.content.full').className = 'contentActive';
document.getElementById('container.content.short').className = 'contentInactive';
currentInputAreaID = 'ng_news_content_full';
} else {
document.getElementById('container.content.short').className = 'contentActive';
document.getElementById('container.content.full').className = 'contentInactive';
currentInputAreaID = 'ng_news_content_short';
}
}
function counter(el)
{var wrapper = document.createElement('DIV');
wrapper.innerHTML = el.value;
var len = (wrapper.textContent || wrapper.innerText).length;
document.getElementById('count').innerHTML = len + ' | ' + el.value.length;
document.getElementById('kb').innerHTML = (len/1024).toFixed(2);
}
</script>
3.Теперь добавим минимальное кол-во символов для описания новости за это в HTML5 отвечает параметр minlength
Ищем
Код:
<div id="container.content" class="contentActive">
<textarea style="width: 99%; padding: 1px; margin: 1px;" name="ng_news_content" id="ng_news_content" rows="10" tabindex="2" ></textarea>
</div>
Код:
<div id="container.content" class="contentActive">
<textarea style="width: 99%; padding: 1px; margin: 1px;" name="ng_news_content" id="ng_news_content" rows="10" tabindex="2" minlength="200" ></textarea>
</div>
4.Теперь надо подключить счетчик ,заменяем,что бы вам было проще наш последний вариант
Код:
<div id="container.content" class="contentActive">
<textarea style="width: 99%; padding: 1px; margin: 1px;" name="ng_news_content" id="ng_news_content" rows="10" tabindex="2" minlength="200" ></textarea>
Код:
<div id="container.content" class="contentActive">
<textarea style="width: 99%; padding: 1px; margin: 1px;" name="ng_news_content" id="ng_news_content" rows="10" tabindex="2" minlength="200" onkeypress="counter(this);" onkeyup="counter(this);" onchange="counter(this);"></textarea>
<BR/>
Минимальное количество символов 200 .Вы ввели: <span id='count'>0</span> символов. <span id='kb'>0</span>Kb
</div>
Вот еще параметры
Validation предлагает большое количество параметров валидации полей форм:
required() // Поле должно быть заполнено
required(dependency-callback) // Проверка текстовых полей/чекбоксов/радио-кнопок/списков
remote(options) // Поле должно быть проверено с использованием ajax-запроса
minlength(length) // Минимальное количество символов
maxlength(length) // Максимальное количество символов
rangelength(range) // Необходимый диапазон количества символов
min(value) // Минимальное значение
max(value) // Максимальное значение
range(range) // Диапазон значений
email() // Проверка корректности адреса электронной почты
url() // Проверка корректности URL
date() // Проверка корректности даты
number() // Значение поля должно быть десятичным числом
digits() // // Для ввода допустимы только цифры и разделители (точки)
creditcard() // Проверка корректности номера кредитной карты
accept(extension) // Поле должно указывать на файл с заданным расширением
equalTo() // Поле должно быть эквивалентно другому указанному полю
Можешь почитать и вот эту статейку "Обалденные XOVERLAY CSS3 эффекты"
Это тоже интересно
- 17.11.13Адаптивная верстка
- 25.03.14 Много-уровневое адаптивное меню
- 21.06.17Смена цифр на JavaScript
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.