Хаки и Скрипты Next Generation CMS : HTML5, Текст и ссылки, JS : Счетчик и ограничение символов в текстовом поле textarea

irbees2008 Опубликовано - 16 - февраля HTML5

Адаптировал: 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() // Поле должно быть эквивалентно другому указанному полю

Можешь почитать и вот эту статейку "Адаптивная верстка"

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

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