textarea字数限制的解决方案

方案一

  • input是标准的浏览器事件,一般应用于input元素,当input的value发生变化就会发生,无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化,propertychange,只要当前对象属性发生改变。
<textarea id="area" name="ss" placeholder="请输入文本内容"></textarea>  
<p><span id="text-count">20</span>/20</p>  

<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>  

方案二

  • 同时绑定change和keydown事件,再配合maxlength属性
<textarea  
    maxlength="100" 
    onchange="this.value=this.value.substring(0, 100)"
    onkeydown="this.value=this.value.substring(0, 100)" 
    placeholder="添加备注信息,不超过100字" id="sk_notes"></textarea>

猜你喜欢

转载自blog.csdn.net/bluelotos893/article/details/77968542
今日推荐