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


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

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

Раскрутка группы Вконтакте с помощью лайков

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

В какие каталоги добавить свой сайт бесплатно

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

Как проверить радио кнопку checkbox без перезагрузки страницы ajax php

Тег base - это базовый адрес

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

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

Тег b - это полужирный шрифт

Как создать свою CMS или фреймворк на MVC. Часть Первая

Тег a - это ссылка

Как на MVC и PHP создать систему восстановления доступа с отправкой пароля на адрес электронной почты
Здесь может быть ваша реклама! Блок 3. Настройка рекламы в личном кабинете.

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


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