Javascript 如何限制在文本区域中输入的字符数

下面是我限制输入文本区域的字符数的尝试：

var limit = 255;
var txt = $('textarea[id$=txtPurpose]');

$(txt).keyup(function() {
    var len = $(this).val().length;
    if (len > limit) {
        //this.value = this.value.substring(0, 50);
        $(this).addClass('goRed');
        $('#spn').text(len - limit + " characters exceeded");
        return false;
    } else {
        $(this).removeClass('goRed');
        $('#spn').text(limit - len + " characters left");
    }
});

---

然而，它并没有很好地工作。一旦达到某个限制（比如255个字符），我如何防止用户输入文本？

以下是我用来将某个字符限制为1200个字符的方法。当有人键入太多字符时，我只会截断该文本区域的内容

$(function() {
    //set up text length counter
    $('#id_limited_textarea').keyup(function() {
        update_chars_left(1200, $('#id_limited_textarea')[0], $('#text_chars_left'));
    });
    //and fire it on doc ready, too
    update_chars_left(1200, $('#id_limited_textarea')[0], $('#text_chars_left'));

});

function update_chars_left(max_len, target_input, display_element) {
   var text_len = target_input.value.length;
   if (text_len >= max_len) {
       target_input.value = target_input.value.substring(0, max_len); // truncate
       display_element.html("0");
   } else {
       display_element.html(max_len - text_len);
   }
}

我的插件：

(function($) {

   $.fn.textCounter = function(options) {

        var defaults = {
            maxlimit: 100,      // max limit character
            description: null,  // element for descript count character
            enter: true         // if accept enter
        };

        var options = $.extend({}, defaults, options);

        if (options.description != null) {
            if (typeof options.description == 'string')
                options.description = $('#' + options.description);
        }

        var fevent = function(ev) {

            var value = $(this).val(),
                k = ev.charCode || ev.keyCode || ev.which,
                incremente = 1;

            if (k == 8)
                incremente = -1;

            if (options.enter == false && k == 13)
                return false;

            if (ev.ctrlKey || ev.altKey || ev.metaKey)  //Ignore
                return true;

            if ((value.length + incremente) > options.maxlimit)
                return false;

            return true;
        };

        var fcounter = function(ev) {
            var value = $(this).val();
            $(options.description).text(options.maxlimit - value.length);
        };

        $(this).each(function(i, el) {
            if ($(this).is(':input')) {
                $(this).unbind('keypress.textCounter').bind('keypress.textCounter', fevent);
                $(this).unbind('keyup.textCounter').bind('keyup.textCounter', fcounter);
            }
        });

    };

})(jQuery);

var limit=“字符数”


$（this.val（$（this.val（）.substring（0，limit））；

尽管这个问题已经很老了。如果我是你，我会做一些很简单的事情，比如

<textarea maxlength="255"></textarea>

---

这将限制用户在文本区域中仅输入255个字符。

要将其简化为基本字符，请执行以下操作：

$(function() {
    //set up text length counter
    $('#id_limited_textarea').keyup(function() {
        update_chars_left(1200, $('#id_limited_textarea')[0], $('#text_chars_left'));
    });
    //and fire it on doc ready, too
    update_chars_left(1200, $('#id_limited_textarea')[0], $('#text_chars_left'));

});

function update_chars_left(max_len, target_input, display_element) {
   var text_len = target_input.value.length;
   if (text_len >= max_len) {
       target_input.value = target_input.value.substring(0, max_len); // truncate
       display_element.html("0");
   } else {
       display_element.html(max_len - text_len);
   }
}

<textarea name="message" onkeydown="return this.value.substr(0,160)"></textarea>

---

将最大值设置为160。

这不会截断字符。这是一个很好的解决方案@布莱恩：是的，这样你就可以看到你用keydown添加了另一个字符，但后来它被删除了。当然，为用户添加消息仍然是首选：

if（$（this）.val（）.length>limit）{//msg for user}

。我已经过测试，但仍然没有100%正常工作，我仍然能够在截断前按一个字符，也就是说，我仍然可以超过一个字符，您测试过吗？您已经复制并粘贴了update_chars_left（）调用，尽管参数相同。这可以进一步简化，请参见下面的答案。谢谢，伙计。。。我忘了：）-0.0001kb的解决方案（+1）对

maxlength

的支持是什么？

<textarea name="message" onkeydown="return this.value.substr(0,160)"></textarea>