1、textarea文本域HTML代码

<style type="text/css">
.mian-textarea{width: 388px;height: 198px;background: #FFFFFF;border: 1px solid #CCCCCC;padding: 16px;}
.mian-textarea-word{height: 22px;line-height: 22px;text-align: right;color: #999;font-size: 14px;margin-top: 23px;}
.mian-textarea-word span{font-size: 14px;color: #333;}
.mian-textarea textarea{width: 100%;line-height: 22px;height: 154px;font-family: "微软雅黑";color: #333;font-size: 16px;resize:none;outline: none;}
.mian-textarea textarea::-webkit-input-placeholder{color: #ccc;}
</style>
<div class="mian-textarea">
    <textarea maxlength="240" placeholder="请输入描述"></textarea>
    <div class="mian-textarea-word">
        <span id="textarea_length">0</span> / 240
    </div>
</div>

2、分析

我们需要在键盘输入后显示输入文本的长度，那么就需要在textarea中使用onkeyup事件（当用户释放键盘按钮时执行Javascript代码）；并写入到span中

3、实现

HTML代码

<div class="mian-textarea">
    <textarea maxlength="240" placeholder="请输入描述" 
        onkeyup="javascript:textareaLength(this, 240, 'textarea_length')"></textarea>
    <div class="mian-textarea-word">
        <span id="textarea_length">0</span> / 240
    </div>
</div>

js代码

function textareaLength(obj, maxLength, id) {
    var curr = obj.value.length;
    if (curr > maxLength) {
        alert("最多可输入240字！");
    } else {
        // document.getElementId(id).innerHTML = curr;
        $('#' + id)[0].innerHTML = curr;
    }
}