Maxlength for editable div

<div class="textarea-Simple" style=" line-height:1; margin: 10px 0 0 0;resize:vertical;border: 1px solid #CDCDCD;" id="txtAreaNew" runat="server" contenteditable="true" data-maxlength="300" data-minlength="50"></div>

<span id="error">Min 50 character or max 300 character required</span>

$(document).ready(function() {
        $('#txtAreaNew').keyup(function(){
            var limit = parseInt($(this).attr('data-maxlength'));
            var minlimit = parseInt($(this).attr('data-minlength'));
            var text = $(this).html();
            var chars = text.length;
            if(chars >= limit){
                $('#error').show();
                var new_text = text.substr(0,limit);
                $(this).html(new_text);
            }else if(chars < minlimit){
                $('#error').show();
            }else if(chars == 0){
                $('#error').hide();
            }else{
               $('#error').hide();
            }
        });
    });