Widgets: textarea с сюрпризом
Скучное сообщение о количестве набранных символов около поля textarea можно украсить и преобразить. Как это сделать - смотрите ниже.
Вторая статья из серии widgets расскажет о таком давно известном и часто используемом элементе, как textarea с проверкой длины вводимого текста.
Задача, скажем смело, тривиальная, и сложностей никогда не вызывает. Однако, решают её всегда одним и тем же способом:
На сам элемент textarea вешают обработчик,
И обязательно ещё создают элемент с заранее заданным id, размещая его, обычно, под заголовком поля textarea или под самим полем. В этом элементе обычно пишут, сколько пользователь набрал символов, и сколько ему осталось.
Моё предложение проще: пусть обработчик сам создаст элемент, в котором будут выводиться три числа: минимальное количество символов, набранное количество символов и максимальное количество.
Как всегда, начнём с примера:
В общем, в данном подходе ещё раз напоминается утверждение «Краткость – сестра таланта». Три числа, с опознавательными знаками:
- < сколько нужно набрать минимум,
- = сколько набрано,
- > верхняя граница.
При желании, можно заменить эти обозначения на свои (или вообще их убрать, оставив только цветовые обозначения), и ввести четвёртое число – количество возможных оставшихся символов.
Теперь о том, как это работает. К сожалению, на данный момент все подобные обработчики форм вынуждают вставлять javascript-код либо после формы, либо в onLoad всего документа. Не избежала эта участь и наше решение.
Как всегда, не обошлось без требований. Всего их два: первое, textarea должна быть «обёрнута» в любой блочный элемент (т.е. просто ячейка таблицы нам не подходит). И второе: каждому элементу textarea должен быть присвоен id.
JavaScript-код подобного виджета прост. Но для его реализации, нам понадобятся четыре функции:
// prototype-analog
function $(obj) {
if (typeof obj == 'object')
return obj;
if (document.getElementById)
return (document.getElementById(obj));
else if (document.all)
return document.all(obj);
return null;
}
// PHP str_replace-analog
String.prototype.str_replace = function(srch, rpl)
{
var ar = this.split(srch);
return ar.join(rpl);
}
// Узнаём родительский элемент
function getParent(el) {
return ((el.parentElement) ? el.parentElement : ((el.parentNode) ? el.parentNode : null));
}
// Узнаём параметры элемента: ширину, высоту, а также координаты
function getElementPosition(el)
{
w = el.offsetWidth;
h = el.offsetHeight;
l = t = 0;
while (el)
{
l += el.offsetLeft;
t += el.offsetTop;
el = el.offsetParent;
}
return {"left":l, "top":t, "width": w, "height":h};
}
Остальной код состоит из двух, среднего размера, функций:
function createTextAreaWidget(el, min, max)
{
var el = $(el);
var counter = $('counter' + el.id);
if (!counter)
{
var parent = getParent(el);
var counter = document.createElement('div');
counter.setAttribute('id', 'counter' + el.id);
counter.className = 'counter';
parent.appendChild(counter);
parent.style.position = 'relative';
counter.style.position = 'absolute';
counter.style.left = getElementPosition(el).width + 2 + 'px';
counter.style.top = 0;
counter.style.height = getElementPosition(el).height + 'px';
}
// перенос строки js принимает за два знака. Исправляем.
len = el.value.str_replace(String.fromCharCode(13), '').length;
if (len >= max) {
el.value = el.value.substr(0, max);
len = max;
}
el.onkeyup = function () {createTextAreaWidget(el, min, max);}
el.onchange = function () {createTextAreaWidget(el, min, max);}
createStat(counter, min, max, len);
}
function createStat(el, min, max, current)
{
el.innerHTML = '<span class=min>< ' + min + '<\/span><br>';
var className = (current <= min) ? 'gray' : ((current >= max) ? 'red' : 'normal');
var cur = (current >= max) ? current + ' !!!' : current;
el.innerHTML += '<span class=' + className + '>= ' + cur + '<\/span><br>';
el.innerHTML += '<span class=max>> ' + max + '<\/span>';
}
Функция createTextAreaWidget() создаёт элемент для подсчёта символов, и также для указанного элемента textarea создаёт два обработчика, которые вызываются по событиям OnKeyUp, и OnChange. Что особенно приятно, эту функцию можно явно включить в обработчик, то есть, написать в html-коде:
<textarea OnKeyUp='createStat(this, 10, 100);' id="some_id" name="some_text"></textarea>
Три параметра, которые передаются в createTextAreaWidget(el, min, max) не нуждаются в особом пояснении. Всё просто: el - это id текстового поля textarea (или само поле, переданное как this или form.elemens[textarea_index] или form.textarea_name); min - минимальное, а max - максимальное количество вводимых в поле символов.
Функция действует просто: присваивает родительскому элементу свойство CSS display: relative, создаёт DIV-элемент с классом counter, который позиционируется абсолютно. Таким образом, counter можно точно расположить справа от текстового поля textarea, зная длину и ширину текстового поля. Именно это и реализуется в коде.
Далее, необходимо корректно подсчитать количество символов в текстовом поле, обрезать его, если их количество превышает максимально допустимое, и назначить обработчики, не забыв также вызвать функцию createStat().
Функция createStat() заполняет созданный около textarea элемент. Три переданных числа располагаются друг под другом, и содержатся в трёх элементах SPAN с различными стилевыми классами.
Соответствующие CSS-стили могут быть такими, как приведено ниже:
.counter {width: 82px; margin: 0; padding: 0 0 0 4px}
.counter SPAN {padding: 1px 0; font: bold 10px 'MS Sans Serif', serif}
.counter .min {color: #4aa24c}
.counter .max {color: #c2311a}
.counter .gray {color: #ccc}
.counter .red {color: #f00}
.counter .normal {color: #000}
Функция createStat() как раз решает, какой класс и какое значение должно быть у элемента с текущим количеством символов. В нашем примере, если количество меньше минимального, число выводится серым цветом (CSS-класс gray); если количество в пределах допустимого, оно выводится чёрным цветом (класс normal), и, наконец, если текущее число больше или равно максимальному, его цвет красный (класс red) и к числу прибавляются восклицательные знаки.
Вот, практически, и всё. Единственное, что осталось сделать, это вывести под необходимой формой код, который и создаст необходимые элементы и обработчики:
<script type='text/javascript'>
<!--
createTextAreaWidget('text1', 100, 2500);
createTextAreaWidget('text2', 0, 200);
-->
</script>
<!-- или сразу в HTML-коде -->
<div><textarea OnKeyUp='createStat(this, 100, 2500);' name="text1" id="some_id1"></textarea></div>
<div><textarea OnKeyUp='createStat(this, 10, 100);'
OnChange='createStat(this, 10, 100);' name="text2" id="some_id2"></textarea></div>
Разумеется, приведённое выше решение можно варьировать и изменять как угодно, а если у Вас есть собственное оригинальное решение – смело делитесь им в комментариях.
10 - 12 февраля 2008 года
Оценка материала:
А как єто всё встроить в php скрипт??
Руками
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Хороший код! Спасибо! А можно добавить туда еще функцию чтобы второй и далее ПОДРЯД пробелы не засчитывались бы счетчиком. А то повадились длину текста пробелами увеличивать...
И деактивировать кнопку Submit пока условие по тексту не будет соблюдено. Ну больше или меньше заданных значений. Вообще бы цены не было б скрипту!
Здравствуйте! Спасибо очень нужная вещь! Но нельзя ли более подробно объяснить что как и куда вставлять? :) Например мне нужна лиш вторая часть Вашего скрипта - та которая считает просто от 0 до 130 символов..
Сам код - его нужно заключать в теги яваскрипта? и Куда его прописать вначале документа под формой или как? Пожалуйста объясните более подробно чайнику)! Как правильно встроить Ваш скрипт в свою форму (2 часть нужно только подсчет количества символов от 0 до 130) Спасибо заранее большое!
вфывфыв