• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
Drose
博客园    首页    新随笔    联系   管理    订阅  订阅

input框限制字数小demo(区分中文字符和英文字符)

【方法】:利用input框的keyup事件,动态监听value值是否超过最大允许范围,若超出则删除超出部分的字符串

【中文字符正则】:/[\u4e00-\u9fa5]/g

【demo】:

  <input type="text" id="testInput">
  <div id="letterNum">0</div>
  
  $('#testInput').on('keyup', function(event){
    var originText = $(event.target).val();   //获取当前input框内的value值
    if(originText.trim()){   //去除前后空格
      var obj = sliceOne(originText.trim(),10);  //调用截取函数,获得截取后的字符串与字节数
      $(event.target).val(obj.text);   //将截取后的字符串赋值给input
      $('#letterNum').text(obj.sum);   //将字节数赋值给div
    }else{
      $('#letterNum').text(0);    //input框没有value值时,赋值0给div
    }
  });
  
·  function sliceOne(str,max){   //param1:字符串,param2:允许最大字节数
    var num = 0;    //用以计算当前字符串是否超过max
    var oStr = '';    //将没有超过max的字符保存
    var outNum = 0;    //最终计算没有超过max的字符
    for(var i = 0,len = str.length; i < len; i++){   //遍历字符串
      if(reg.test(str[i])){          //如果匹配中文正则的,num累加2,否则累加1
        num += 2;
      }else{
        num += 1;
      }

      if(num > max){        //如果num超过max,跳出循环
        console.log(num);
        break;
      }else{             //如果num不超过max,将此时的字符累加到oStr中,将此时的字节数赋值给outNum
        oStr += str[i];
        outNum = num;
      }
    }
    var obj = {
      text: oStr,
      sum: outNum
    }
    return obj;     //返回
  }

 

posted @ 2017-07-20 22:32  Drose  阅读(484)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3