zoukankan      html  css  js  c++  java
  • 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();
  • 相关阅读:
    九宫格拼图 支持44 55等
    js 怎样获取div 图片等的宽度,只要值,不要px
    spring boot单元测试之RestTemplate(一)
    java设计模式-原型(prototype)
    Hibernate注解(二):关联关系映射注解
    spring之@value详解二(转载)
    spring之@Value详解(转载)
    Spring之基于注解的注入
    Spring之bean生命始末
    Spring之bean后处理器
  • 原文地址:https://www.cnblogs.com/summer_shao/p/3920485.html
Copyright © 2011-2022 走看看