textarea限制字符数

html代码:

 1 <div class="remark_edit J_Remark_Edit">
 2     <div class="tip-body">
 3         <h4>备注信息:</h4>
 4         <textarea cols="44">请输入备注信息</textarea>
 5     </div>
 6     <div class="tip-ctrl">
 7         <a href="#" class="btn-s-red J_Remark_Yes">确定</a>
 8         <a href="#" class="btn-s-gray J_Remark_Cancel">取消</a>
 9         <span>
10         还能输入<strong class="maxNum" style="color: rgb(51, 51, 51);">137</strong>个字
11         </span>
12     </div>
13 </div>

js代码段:

var Remark = {
        init:function(){
            this.editRemark = $('.J_Remark_Edit');
            this.bind();
        },
        bind:function(){
            var self = this;
            var $text = self.editRemark.one('textarea'),
                bSend = false;

            //事件绑定, 判断字符输入
            $text.on('keyup',function(){
                bSend = self.confine();
            });
            $text.on('focus',function(){
                bSend = self.confine();
            });
            $text.on('change',function(){
                bSend = self.confine();
            });

            self.editRemark.all('.J_Remark_Yes').on('click',function(e){
                e.preventDefault();
                if(bSend){
                    var msg = S.trim($text.val());
                    // send msg;
                }else{
                    alert('内容不能超过140个字!');
                }
            })
        },
        //输入字符限制
        confine : function(){
            var self = this;
            var $text = self.editRemark.one('textarea'),
                $maxNum = self.editRemark.one('.maxNum'),
                maxNum = 140,
                bSend = false;

            var iLen = $text.val().length;
            $maxNum.html(maxNum - Math.floor(iLen));
        //最重要的就是这一句
if(maxNum - Math.floor(iLen) >= 0){ $maxNum.css({"color":"#333"}); bSend = true; }else{ $maxNum.css({"color":"#d31022"}); bSend = false; } return bSend; } } Remark.init();

 

posted @ 2014-08-18 21:27  sx_summer  阅读(820)  评论(0编辑  收藏  举报