完美解决 textarea 实时显示字数

完美解决 textarea 实时显示字数

不管是使用onkeydown/onkeypress/onkeyup哪种其实都是不完美的，最显而易见的缺陷就是在处理复制、粘贴的内容时是无效的，还有在移动端也有可能会有问题。
这时可以使用onpropertychange，它可以实现实时监听的效果，但是这个事件是IE专属的，这时最好判断是否为IE浏览器，是就是用onpropertychange，不是就使用另一个oninput，最好不要使用onchange，因为onchange是在失焦的时候才出发，不能实时监控，onkeydown在键盘按下时触发，也会发生错乱(比如你写 智慧 两个汉字 它有可能显示的是拼音的长度6)，如果是简单的使用最好是onkeyup，更完美的就是onpropertychange结合oninput。

<textarea id="area" name="ss" placeholder="请输入文本内容">textarea>  
<p><span id="text-count">20span>/20p>  

<script type="text/javascript">  
    /*字数限制*/  
    $("#area").on("input propertychange", function() {  
        var $this = $(this),  
            _val = $this.val(),  
            count = "";  
        if (_val.length > 20) {  
            $this.val(_val.substring(0, 20));  
        }  
        count = 20 - $this.val().length;  
        $("#text-count").text(count);  
    });  
script>