Форма для подсчёта знаков в анонсе

Понадобилась мне одна штука для написания анонсов, подсчитывающая символы/количество знаков в тексте. А поскольку память дырявая и работаю я на разных машинах, то специальный софт или какой-либо онлайн сервис мне не очень подходят. А вот адрес блога помню железно).

Вашему вниманию представляю скриптик, который содержит поле для ввода или копипаста текста. Скрипт позволяет ввести желаемое количество знаков (т.е. цель), а внизу считает, сколько осталось написать до достижения результата.
Не знаю, пригодится ещё кому-нибудь или нет, но раз я хочу поставить в блог и потратил время на ковыряние стилей, то почему бы об этом не написать?

Посчитаем?

Введите кол-во желаемых знаков в анонсе: 


Скопируйте или введите сюда текст анонса
Осталось написать 
 знаков ещё.

Перед тем, как постить текст, не забудьте определить размер ожидаемого анонса. Возможно, что при копипасте нужно будет в конце предложения нажать ввод. Максимальное количество знаков - 999.

Установка.
Стили, скрипт и код формы можно разом скопипастить на статическую страницу (друг за другом) в Blogger (подробности).
Css (стили).

<style type="text/css">
/*<![CDATA[*/
/* Character Counter - By DayDreamingOnline (http://www.ianjgough.com)*/
/* This credit MUST stay intact for use */
<!-- 
#characterCounter input{color:#4f4f4f;background:#fff;border:1px solid #bababa;font-weight:400;}#characterCounter .submit input{color:#000;background:#d4d4d3;border:2px outset #bababa;text-align:center;padding:2px}#characterCounter fieldset{border:2px solid #bababa;padding-bottom:8px;width:400px;}#characterCounter legend{color:#fff;background:#adadad;border:1px solid #bababa;font-weight:700;padding:2px 6px;}#characterCounter textarea{text-align:left;margin-left:1px;margin-right:1px;width:95%;color:#636363;background:#f0f0ef;border:1px solid #bababa;overflow:auto;}.center{text-align:center;}#characterCounter fieldset {background:#fff}#characterCounter {width:400px;margin:0 auto;font: 16px Arial,Helvetica,sans-serif;}#CharacterCount {margin-bottom:2px}#remLen {margin-top:2px}#characterCounter .center,#characterCounter .submit {text-align:center}
-->
/*]]>*/
</style>

Настройки css:
characterCounter input - отвечает за поле ввода цели
characterCounter fieldset - отвечает за общую форму и рамку
characterCounter .submit input - отвечает за кнопки
characterCounter legend - отвечает за название (заголовок формы)
characterCounter textarea - отвечает за поле ввода анонса

В оргинале все элементы формы были ужасных несочетаемых цветов, поэтому дизайн я заточил под свою страницу.

Javascript:

<script type="text/JavaScript">
//<![CDATA[
<!-- Character Counter - By DayDreamingOnline (http://www.ianjgough.com) // --> 
<!-- This credit MUST stay intact for use // --> 
function textCounter(field, countfield) {
    var max = document.getElementById('CharacterCount').value;
    if (field.value.length > max) field.value = field.value.substring(0, max);
    else
    countfield.value = max - field.value.length;
} 
//]]>
</script>

Форма и содержимое:

<form id="characterCounter" action="">
<fieldset>

<legend>Посчитаем?</legend>
<p class="center">
<label for="CharacterCount">Введите кол-во желаемых знаков в анонсе:&nbsp;</label> 
<input id="CharacterCount" type="text" size="3" maxlength="3" onkeyup="form.remLen.value=this.value" />
<label for="message">
<textarea id="message" cols="50" rows="7" onkeydown="textCounter(this.form.message, this.form.remLen);" onkeyup="textCounter(this.form.message, this.form.remLen);" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue">Скопируйте или введите сюда текст анонса</textarea></label>
<label for="remLen">Осталось написать&nbsp;
<input type="text" class="inputs" id="remLen" value="" size="3" maxlength="3" readonly="readonly" />&nbsp;знаков ещё.</label>
</p>
<p class="submit"> 
<input type="button" value="Выделить всё" onclick="javascript:this.form.message.focus();this.form.message.select();" id="B1" />
<input type="reset" value="Убрать" id="B2" />

</p>
</fieldset>
</form>

Здесь представлен мой "перевод", любую строчку текста можно изменить.
Автор скрипта пожелал, чтобы в коде сохранились ссылки на его сайт, пусть так и будет :). Из параноидальных соображений можно весь код поместить в теги <noindex></noindex> для запрета индексирования содержимого Яндексом.

Оригинал.