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();