方法一：textarea输入框倒数字数限制

1、html代码

<div class="wordCount" id="wordCount">
    <textarea placeholder="textarea还剩余字数统计"></textarea>
    <span class="wordwrap"><var class="word">50</var>/50</span>
</div>

2、css代码

body,a {
    font-size:14px;
    color:#555;
}
.wordCount {
    position:relative;
    width:600px;
}
.wordCount textarea {
    width:100%;
    height:100px;
}
.wordCount .wordwrap {
    position:absolute;
    right:6px;
    bottom:6px;
}
.wordCount .word {
    color:red;
    padding:0 4px;
}

3、js代码

$(function() {

    //先选出 textarea 和 统计字数 dom 节点
    var wordCount = $("#wordCount"),
        textArea = wordCount.find("textarea"),
        word = wordCount.find(".word");
    //调用
    statInputNum(textArea, word);
});
/*
 * 剩余字数统计
 * 注意 最大字数只需要在放数字的节点哪里直接写好即可 如：<var class="word">200</var>
 */
function statInputNum(textArea, numItem) {
    var max = numItem.text(),
        curLength;
    textArea[0].setAttribute("maxlength", max);
    curLength = textArea.val().length;
    numItem.text(max - curLength);
    textArea.on('input propertychange', function() {
        var _value = $(this).val().replace(/\n/gi, "");
        numItem.text(max - _value.length);
    });
}

运行代码实例可得到以下效果

方法二：textarea输入框输入字数限制

1、html代码

<div class="js_container">
    <div class="js_form">
        <div class="js_cell">
            <textarea id="doctorIntroduction" class="textarea" placeholder="请开始你的表演" rows="3"></textarea>
            <div class="counter">
                <span class="textareaLength">0</span>/300
            </div>
        </div>
    </div>
</div>

2、css代码

.js_cell {
    border:1px solid #666;
    border-radius:2px;
    background:beige;
    width:30%;
    position:relative;
}
#doctorIntroduction {
    /*清除文本框默认样式*/
        outline:none;
    border:none;
    resize:none;
    background:beige;
    /* 宽度自适应 */
        box-sizing:border-box;
    width:100%;
    height:100px;
    padding:6px 8px;
    font-family:"微软雅黑";
    font-size:15px;
    color:#222;
}
.counter {
    position:absolute;
    right:12px;
    bottom:4px;
    font-family:"微软雅黑";
    font-size:14px;
    color:#ccc;
}

3、js代码

$('.js_container').on('input propertychange', '#doctorIntroduction', function(e) {
    e.stopPropagation(); //阻止事件冒泡到父元素

    var fizeNum = $(this).val().length;
    if (fizeNum > 300) {
        var char = $(this).val().substr(0, 300);
        $(this).val(char);
        fizeNum = 300; //最终字数为300
        alert('输入文字不能超过300哦！');
    }
    $(this).parent().find('.textareaLength').text(fizeNum);
})

运行代码效果如下：

方法三、控制input输入框的最大字数，并且实时提示用户余下字数

1、html代码

<input class="form-control" id="title" name="title" placeholder=" 请输入" type="text">

<a href="" id="titleCount" style="color:#9B9B9B;text-decoration: none;font-size:12px;">还可以输入12个字</a>

2、js代码

$("#titleCount").text("还可以输入" + (12 - $("#title").val().length) + "个字");
$("#title").keyup(function() {
    if ($("#title").val().length > 12) {
        $("#title").val($("#title").val().substring(0, 12));
    }
    $("#titleCount").text("还可以输入" + (12 - $("#title").val().length) + "个字");
});

运行效果图：