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

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

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); 

7 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, поэтому породили другой баг)

ответить
August 17, 2017 at 03:21 am

As one of a limited edition of 260 watches, the swiss replica breitling watch is haunted by the shining gold case with pine green dial, gradually turned into the emerald tone, dial 18K gold standard fake watches collocation and slender pointer and Barton with a loose green crocodile leather fake watches watchband, echoing the dial color.

ответить
August 18, 2017 at 10:03 am

Longchamp unveiled limited ralph lauren outlet uk edition handbags namely ‘The Peacock Majestic Le Pliage Héritage’ and ‘India the Vibrant Le Pliage Héritage’ inspired by India and only available in the country. In addition to this, the fashion House also Longchamp Outlet debuted its Fall 2017 collection which is inspired by the 1970s Parisian, strong, feminine woman full of michael kors outlet uk contrast who embodies the posture, the attitude and the state of mind of a free, independent and active woman.

ответить
SHUI PA SHUI:
September 20, 2017 at 04:25 am

Jaeger Le Coultre replique montres occupe une position éminente dans le monde de l'horlogerie et se démarque de certaines marques de luxe haut de gamme comme Audemars Piguet et d'autres compagnies de montres suisses. Jaeger Le Coultre cible les hommes et les femmes. La marque Jaeger-LeCoultre est idéale pour les employés de bureau, les femmes sophistiquées et élégantes ne doivent pas chercher plus loin que Jaeger-Le Coultre - ses replique montre élégantes et à la mode vont améliorer leur déclaration de mode individuelle.

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

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