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

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

  1. Главная страница
  2. HTML5
  3. Текст и ссылки
  4. JS
irbees2008 irbees2008 Опубликовано - 16 - февраля HTML5
4016 - 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() // Поле должно быть эквивалентно другому указанному полю

Можешь почитать и вот эту статейку "Хак cкользящая панель - Portamento "

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Популярное

Опрос

Ваше мнение

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

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

Ссылки

Обновленное

Архив

Теги

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

Статистика

  • Caйту: 4395 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 662
  • Онлайн всего: [2]
  • Гости: [2]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 33
  • Генерация страницы: 0.477сек
  • Потребление памяти: 6.264 Mb 
  •   Яндекс.Метрика