16 +
Ноябрь 2018
1Чт2Пт3Сб4Вс5Пн6Вт7Ср8Чт9Пт10Сб11Вс12Пн13Вт14Ср15Чт16Пт17Сб18Вс19Пн20Вт21Ср22Чт23Пт24Сб25Вс26Пн27Вт28Ср29Чт30Пт

Скачать Счетчик количества символов в поле ввода бесплатно.

У нас вы можете ознакомиться с Счетчик количества символов в поле ввода

Данный материал предоставлен сайтом исключительно в ознакомительных целях. Если вы являетесь правообладателем какого-то файла и хотите убрать ссылку на скачивание, сообщите Нам.

Счетчик количества символов в поле ввода

Автор:  | Дата:  | Просмотр: 24К 



+5


Счетчик количества символов в поле ввода

Расскажу немного про один способ как ограничить вводимое количество символов в форму.

В нашем случае используем событие keyup, возникающее, когда пользователь отпускает любую клавишу – тогда не придется думать о том, не была ли нажата клавиша del или bcsp. При отпускании клавиши считаем количество символов в поле, сравниваем его с заданным максимумом, и если введенных символов больше, чем надо – отрезаем лишние. При этом в отдельный блок выводим сообщение о том, сколько нам осталось напечатать.

Заданный максимум будем брать из значения атрибута maxlength текстового поля ввода input или textarea.

Одновременно с подсчетом введенных символов наведем красоту: если число оставшихся до максимума символов становится меньше, к примеру, 10 – добавляем к сообщению класс, который покрасит его в красный цвет.

Итак, поехали.

Шаг 1. Подключаем скрипты
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/charRemaining.js"></script>

Задаем текстовому полю ввода атрибут maxlenghth – в нормальных браузерах с поддержкой HTML5 этот атрибут сам по себе ограничивает возможное число вводимых символов – без всякого javascript. Однако далеко не во всех.

Внизу пропишем дополнительный блок, куда будет выводиться сообщение об оставшемся количестве букв.
Шаг 2. Размечаем страницу
<textarea id="textarea" cols="25" rows="5" maxlength="25"></textarea>
<div id="textareaFeedback"></div>

Шаг 3. Код скрипта
$(function() {
var maxLength = $('#textarea').attr('maxlength'); //(1)
$('#textarea').keyup(function() {
var curLength = $('#textarea').val().length; //(2)
$(this).val($(this).val().substr(0, maxLength)); //(3)
var remaning = maxLength - curLength;
if (remaning < 0) remaning = 0;
$('#textareaFeedback').html(remaning + ' осталось символов'); //(4)
if (remaning < 10) //(5)
{
$('#textareaFeedback').addClass('warning')
} else {
$('#textareaFeedback').removeClass('warning')
}
})
})

1. Извлекаем заданное максимальное значение числа символов
2. Считаем, сколько символов в данный момент впечатано в поле. Для этого используем свойство length (свойство – не метод! Поэтому без скобок!) значения val текстового поля.
3. Откусываем «лишние» символы (если они есть). Для этого используем javascript метод substr, который выделяет подстроку из строки, на которую был вызван (мы вызвали метод substr на строку — текущее значение val ). Первый аргумент метода – индекс символа, начиная с которого будем вырезать (тут – ноль, т.е. вырезаем с самого начала), а второй – количество символов, которое будет вырезать (тут – максимально допустимое по умолчанию, остальное будет лишним). И эту вырезанную подстроку подставляем в качестве нового значения текстового поля.
4. Пишем мессажку
5. Если оставшихся символов меньше 10, красим ее в красный цвет.

DEMO

Вес:
33,44 Kb
Загрузок:
16



Скачать торрент


Готовим для Вас Бонус, пожалуйста подождите!





Поиск торрент раздач, пожалуйста подождите!

У нас вы можете скачать бесплатно Счетчик количества символов в поле ввода torrent, Скачать Счетчик количества символов в поле ввода торрент можно по ссылкам расположенным выше. Для скачивания вам понадобиться вот эта программа µTorrent.

Данный материал предоставлен сайтом Quantum-Soft.NET исключительно в ознакомительных целях.

Если вы являетесь правообладателем какого-то файла и хотите убрать ссылку на скачивание, сообщите Нам.

Ключевые теги: символов, поле, ввода, Счетчик, количества,





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