在输入了一定数量的字符后，禁止用户在文本区域字段中输入文本

试试这个：

var max = 10;
$('#description')
.keydown(function(event){
    if (event.keyCode != 8 && event.keyCode != 46 && $(this).val().length >= max) {
        event.preventDefault();
    }
})
.keyup(function(){
    var $this = $(this),
        val = $this.val().slice(0, max),
        val_length = val.length,
        left = max - val_length;
    $('.character-count').text(left + ' characters left');
    $this.val(val);
});

在每个键控后，max符号后的文本区域值被截断。
Keydown事件在值长度达到max后被阻止，
但您仍然可以按backspace（8）或delete（46)）键。

使用本地存储以便处理以后使用

HTML

<textarea name="userText" id="description" cols="30" rows="10"></textarea>
<div class="character-count"></div>

jQuery

    $(function(){
    var comment = $('#description');
    var val = localStorage.getItem( comment.attr('id') ),
        max = 4000,
        len = val.length,
        left = ( max - len ) ;
    // if the value exists, set it
    if (val) {
        comment.val(val);
        $('.character-count').text( left + ' Character(s) left');
    }
});
$('#description').on('keyup', function (e) {
    var $this = $(this),
        max = 4000,
        val = $this.val(),
        val_length = val.length,
        remain = ((max - val_length)>=0)?(max - val_length):0;
    $('.character-count').text(remain + ' Character(s) left');
    if( val_length > max ){
        $this.val(val.slice(0,max));
    }
    // let's check if localStorage is supported
    if (window.localStorage) {
        localStorage.setItem($(this).attr('id'), $(this).val());
    }

});

查看演示

有一个内置的HTML5属性maxlength，它将限制输入符号的数量。没有必要自己重新发明：

$("input").on('input', function() {
  var left = this.maxLength - this.value.length;
  $("span").text(left + " characters left");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" maxlength="5"/>
<span>5 characters left</span>

此外，如果使用keyup处理程序，那么用户可以很容易地在其他地方键入文本，并根据需要粘贴任意多的字符。使用input。

谈到"即使在页面刷新后也要跟踪输入了多少字符"，你可能会使用cookie，但这是一个值得怀疑的功能。任何用户都可以轻松更换或清空任何cookie或其他本地存储。如果这个限制真的很重要，那么在服务器端实现它。

您可以按照coolgoy的建议将用户输入的全部文本保存在cookie中，刷新时您只需检索cookie数据并显示在文本区域以及字符数跟踪器中。

<script>
        $(function () {
            var descText = $.cookie('description');
            var descTextArea = $('#description');
            var maxLength = descTextArea.data('maxLength');
            if (descText) {
                descTextArea.text(descText);
                $('.character-count').text((maxLength - descText.length) + ' characters left');
            }
            else {
                $('.character-count').text(maxLength + ' characters left');
            }
            descTextArea.keydown(function (event) {
               var max = maxLength;
               var len = $(this).val().length;
               var ch = max - len;
               if (ch < 0 ) {
                  event.preventDefault();
                  return false;
               }
               $('.character-count').text(ch + ' characters left');
               $.cookie('description', $(this).val(), {path: '/'});
            });
        });
    </script>

通过legotin引用答案后使用keydown。HTML文件是：

<textarea id="description" data-max-length="4000"></textarea>
<span class="character-count"></span>

我使用的是jquery.cookie插件。

使用e.preventDefault（）停止处理。

e.preventDefault();

$('.character-count').html('20 characters left');
var len = 0;
var max = 20;
$('#description').keydown(function (e) {
    var code = e.keyCode;
    if(len == max && code != 8)
    {
        e.preventDefault();
        return false;
    }
    len = $(this).val().length;
    var ch = max - len;
    $('.character-count').text(ch + ' characters left');
});

试试这个Fiddle