+7(983)178-57-68

Новые горизонты успешного бизнеса!

Главная Посчитать и заказатьОставить заявку Статьи Отзывы Контакты

Скрипт, показывающий сколько символов осталось ввести в поле. JavaScript. jQuery

Существуют различные скрипты, для увеличения функциональности форм. Рассмотрим скрипт, который показывает сколько символов осталось ввести в поле, с заданным максимальным количеством. Для начала нам понадобится вот такой скрипт:
<script language="JavaScript" type="text/javascript">
<!--
$(document).ready(function(){
// вычисляем первоначальное значение счетчика и его цвет
var value = $('#form input[name="name"]').attr('value') || '';
var initLength = Math.max((value ? (50 - value.length) : 50),0);
$('#name_coun').css('color', 'rgb('+(5*value.length)+', 0, 0)');
$('#name_coun').html(initLength.toString());

$('#form input[name="name"]').keyup(function(){
var value = $(this).attr('value') || '';
var lengthToGo = Math.max((50 - value.length),0);
$('#name_coun').css('color', 'rgb('+(5*value.length)+', 0, 0)');
$('#name_coun').html(lengthToGo.toString());
});
});
-->
</script>
Затем, сама форма
<form id="form">
Имя пользователя
<input type="text" name="name" value="" maxlength='50' style="width:200px;">
осталось <span id="name_coun">50</span> символов </form>
Количество введенных элементов в поле вычисляется при событии onkeyup, значение счетчика устанавливается функцией html(), а цвет функцией css().

Для установки цвета используется формат RGB. В этом примере использовался коэффициент 5, который умножался на количество введенных символов. Поскольку в примере максимальное количество символов равняется 50, то максимальный уровень красного цвета счетчика равняется 250. Если вы захотите поменять максимальное количество символов, вам нужно пересчитать значение коэффициента, чтобы максимальный уровень красного цвета не превышал 255.

Для работы всего выше здесь изложенного, вам понадобится скрипт jquery.js. Найти в интернете его не трудно.

* jQuery - New Wave Javascript
* Copyright (c) 2007 John Resig (jquery.com)

Добавьте строчку между тегами HEAD
<script type="text/javascript" src="jquery.js"></script>

Демонстрация


Остались вопросы? Спрашивайте!


Понравилась статья? Расскажи другим :)

Опубликовано: | Просмотров: 6774