Хаки и Скрипты Next Generation CMS

Счетчик и ограничение символов в текстовом поле textarea

irbees2008 irbees2008 Опубликовано - 16 - февраля HTML5
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>
Вот мы поставили minlength="200" ограничение в 200 символов и пока не наберете новость не добавится.
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 эффекты"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4628 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [7]
  • Гости: [7]
  • Были сегодня : [3] Google, Яндекс, dankeanke
  • SQL запросов: 32
  • Генерация страницы: 0.438сек
  • Потребление памяти: 5.176 Mb 
  •   Яндекс.Метрика