Ограничение символов вводимых в текстовое поле на JavaScript


Сегодня мы напишем функцию на JavaScript. Это функция будет проверять строку, введенную в текстовое поле на ограничение максимальной длины.


Открываем тег <script> и в нем пишем, функцию, внутри которой мы получаем значение текстового поля, id которого равен id1. Далее при каждом нажатии какой-то кнопки на клавиатуре с помощью функции keyup будет запускаться функция count, которая используя функцию length, считает количество символов в нашем текстом поле и записывает его в переменную umber.


Затем вы проверяем, если значение number больше чем 250, то мы заменяем значение текстового поля, на сообщение "Ограничение по символам". Иначе блоку c id равным count мы выставляем значение равное переменной number. Изначально внутри блока лежит значение 0.

 

Листинг JavaScript функции:

$(function() {
    $("input[id='id1']").keyup(function count() {
        number = $("input[id='id1']").val().length;
        if (number > 250) $("input[id='id1']").val('Ограничение по символам');
        else $("#count").html(+number);
    });
});  

 

Пример текстового поля и блока:

<input id="id1" type="text" name="title" value="Введите заголовок"/>
<div id="count" style="position: relative; float: right; margin-top: -5px; width: 30px; color:#21bc11; text-align: right;">0</div>


Наглядно это выглядит вот так:

Здесь может быть ваша реклама! Блок 1. Настройка рекламы в личном кабинете.
Grai Просмотров сегодня +1 30 июня 2017 команда сайта
Ещё пока нет комментариев, будь первым!
Оставить комментарий
Здесь может быть ваша реклама! Блок 2. Настройка рекламы в личном кабинете.
   🔔 Отдохните не много, может Вам будет интересно прочитать статьи пользователей нашего сайта.

Безопасная авторизация пользователей на MVC и PHP

Создание профиля или личного кабинета пользователя на MVC, PHP и SQL

Тег caption - это заголовок таблицы

Как на MVC с помощью PHP правильно загружать файлы с сервера. Часть Вторая

Тег button - это кнопка

Тег datalist - это список возможных вариантов

Тег code - это отображение программного кода

Как на MVC с помощью PHP загружать изображения на сервер

Как узнать ID последней вставленной записи

Подключение к БД и вывод результата на PHP через PDO на MVC

Как на MVC при помощи PHP создать регистрацию с хешированием пароля

Тег applet - это апплет
Здесь может быть ваша реклама! Блок 3. Настройка рекламы в личном кабинете.

→ Магазин матрасов в Москве с доставкой по России.
→ Недорогие детские матрасы от 2215 руб!
Реклама Интернет-магазин Каталог матрасов открыт 24 часа, 7 дней в неделю!
www.catalog-matrasov.ru
→ Продажа арендованных лесных участков в РБ от 30 000 руб. Жми сейчас!
РекламаПокупая участок вы получаете выгоду, вам не нужно бегать по инстанциям и заниматься бумажной волокитой, тратя свое время. Вы сразу приобретаете ГОТОВЫЙ БИЗНЕС – лесозаготовительное предприятие.
www.svetobor.com
→ BULLET-SHOP - сварка аргоном, полуавтомат, тюнинг авто!
Реклама Ремонтируем радиаторы, интеркулеры, пайпинг и ВСЁ из алюминия, чугуна, стали с ГАРАНТИЕЙ КАЧЕСТВА. Диагностика и ремонт подвески, трансмиссии, всех узлов и агрегатов
www.bullet-shop.pro
→ Доставка товаров из Китая в кротчайшие сроки без переплат!
Реклама Вам нужен товар из Китая мы с радостью доставим его, а также поможем с выкупом товара с ТаоБао, АлиБаба, 1688.com. Помощь в переводе при заключении сделок!
www.unikorob.ru
Реклама помогает поддерживать
и развивать наш сервис.


Подробнее
(ссылка откроется в новой вкладке)