Функция JQuery для отображения оставшихся символов в текстовой области / ввода

Question

Я работаю над куском JQuery, чтобы показать количество оставшихся символов при наборе текста в поле ввода / ввода текста.Но, похоже, это не работает, я очень плохо знаком с JQuery, поэтому я уверен, что ниже приведен простой код:

$(":textarea[data-limit-input]").keyup(function () {
var charLength = $(this).val().length;
var charLimit = $(this).attr("data-val-length-max");
// Displays count
$(this).next("span").html(charLength + " of " + charLimit + " characters used");
// Alert when max is reached
if ($(this).val().length > charLimit)
    $(this).next("span").html("<strong>You may only have up to " + charLimit + " characters.   </strong>");
});

Любая помощь будет признательна

Answer 1

Это работает для меня:

http://jsfiddle.net/7Zvhq/

Я изменил селектор textarea, добавил правильное значение данных в charLimit и закрыл функцию и оператор if.

EDIT Я обновил его, чтобы он возвращал false, если вы пытаетесь набрать, когда предел достигнут, и сделал его красивее:)

http://jsfiddle.net/7Zvhq/3/

Answer 2

Кажется, вам не хватает});в конце?Также: textarea может быть записано как $ ("textarea [data-limit-input]"), поскольку это обычный селектор CSS.

В противном случае я не вижу ничего странного.

Answer 3

Вы также можете попробовать этот код в textarea для ввода оставшихся символов.

Код:

jQuery(document).ready(function(){
    var totalChars      = 200; 
    var countTextBox    = jQuery('#comment')
    var charsCountEl    = jQuery('#countchars');

    charsCountEl.text(totalChars);
    countTextBox.keyup(function() { 
        var thisChars = this.value.replace(/{.*}/g, '').length; 
        if(thisChars > totalChars) 
        {
            var CharsToDel = (thisChars-totalChars);
            this.value = this.value.substring(0,this.value.length-CharsToDel);
        }else{
            charsCountEl.text( totalChars - thisChars );
        }
    });
});

Вы также можете увидеть демо здесь. http://jsfiddle.net/kishan_web/1k49s5vr/

Answer 4

Является ли data-limit-input идентификатором или именем вашей текстовой области?

Я бы попробовал

$('textarea#data-limit-input').keyup(handler);

или

$('textarea[name="data-limit-input"]').keyup(handler);

Answer 5

установить максимальную длину атрибута для текстовой области: http://www.w3schools.com/tags/att_input_maxlength.asp максимальная длина каждой проверки ключей - textarea.val (). Длина