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


X

Ограничение символов вводимых в текстовое поле на 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>


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

Grai Просмотров сегодня +4 30 июня 2017 команда сайта
Создание сайтов и мобильных приложений от 5 500 руб. Любой сложности!
Реклама Собственный фреймворк. Большие и сложные проекты. ТОП 100 разработчиков РФ.
Создание сайтов от 5 500 руб.
Мобильные приложения от 50 000 руб.
irogex.ru
Наши проекты Инстаграм от 6 500 руб.
Конструкторы Ugears купить в Иркутске от 690 руб. с Доставкой!
Реклама UGEARS это путешествие в удивительную атмосферу гармонии природы и совершенства конструкторской мысли
Конструктор Навигатор дат - 690 руб.
Конструктор Комбайн - 2990 руб.
ugears-irk.ru
Оплата и Доставка Контакты
Стоматология в Улан-Удэ | ДентаВита | Шок цены от 100 руб!
Реклама От всей нашей семьи хотим выразить огромную благодарность стоматологической клинике
Осмотр, консультация от 150 руб.
Рентгеновский снимок от 100 руб.
dentavita03.ru
Наши цены Отзывы
Реклама помогает поддерживать
и развивать наш сервис.


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