Количество символов в textarea. Countable plugin

Написана 25 Октября, 2013 в 13:15. Автор: borN_free   |   Теги: countable, jquery, github Комментарии 4

Countable Обычная задача - сделать счетчик, который при вводе текста в textarea уменьшается до 0, после этого запрещает вводить какие-либо символы.

Знаете, какие проблемы могут возникнуть?

Приступим. Допустим мы разрешаем ввести 500 символом. Во-первых, ставим ограничение через html:


Далее ищем готовое решение, желательно плагин jQuery. Я выбрал этот.

Подключаем файл и используем:

$('#description').simplyCountable({
    maxCount: 500,
    strictMax: true
});

Всё хорошо, но давайте нажмем пару раз enter, и счетчик символов начинает сходить с ума. Дело в том, что браузер считает перевод строки как 2 символа, поэтому раньше начинает запрещать ввод, в то же время плагин считает перевод каретки как 1 символ, и показывает вместо нуля число переводов строк, когда уже ввести ничего нельзя. Вот такой интересный баг.

Исправляется это довольно легко, что я и сделал, послав Pull Request в данный плагин.

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

Примерно так:

var content = $('#description').val();
var lineBreaksCount = (content.match(/\n/g)||[]).length;
var allowedCount = options.maxCount - (content.length + lineBreaksCount); 

4 comments

+1 ответить
October 30, 2013 at 10:51 am

Тоже самое можно сделать в принципе и без дополнительных плагинов jQuery, например вот так: http://blog.alexanderschilling.ru/post/102

ответить
borN_free:
November 1, 2013 at 05:04 pm

На сколько я понял, у вас не учитывается ситуация вставки кода из буфера, следовательно код можно обмануть.

+2 ответить
November 1, 2013 at 10:23 pm

Если поставить ограничения в textarea, то нет, да и в Yii-Framework например это можно проверять на уровни модели. Я не претендую на лучшее решения, просто показал альтернативный пример.

ответить
Badalov:
September 22, 2015 at 12:54 pm

Вы не учли что считает перевод строки как 2 символа только Chrome, поэтому породили другой баг)

Оставьте свой комментарий:

Поля с * обязательны.