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

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