jQuery扩展实现text提示还能输入多少字节的方法


Posted in Javascript onNovember 28, 2016

本文实例讲述了jQuery扩展实现text提示还能输入多少字节的方法。分享给大家供大家参考,具体如下:

1.添加jQuery自定义扩展

$(function($){
  // tipWrap:  提示消息的容器
  // maxNumber:  最大输入字符
  $.fn.artTxtCount = function(tipWrap, maxNumber){
    var countClass = 'js_txtCount',  // 定义内部容器的CSS类名
    fullClass = 'js_txtFull',  // 定义超出字符的CSS类名
    disabledClass = 'disabled';  // 定义不可用提交按钮CSS类名
    // 统计字数
    var count = function(){
      var val = lenFor($.trim($(this).val()));
      if (val <= maxNumber){
       tipWrap.html('<span class="' + countClass + '">\u8FD8\u80FD\u8F93\u5165 <strong>' + (maxNumber - val) + '</strong> \u4E2A\u5B57\u8282</span>');
      }else{
       tipWrap.html('<span class="' + countClass + ' ' + fullClass + '">\u5DF2\u7ECF\u8D85\u51FA <strong>' + (val - maxNumber) + '</strong> \u4E2A\u5B57\u8282</span>');
      };
    };
    $(this).bind('keyup change', count);
    return this;
  };
});

获取字节数函数

var lenFor = function(str){
var byteLen=0,len=str.length;

if(str){


for(var i=0; i<len; i++){



if(str.charCodeAt(i)>255){




byteLen += 3;



}



else{




byteLen++;



}


}


return byteLen;

}

else{


return 0;

}
}

2.实例化

<script type="text/javascript">
// demo
$(function($){
  // 批量
  $('.autoTxtCount').each(function(){
    $(this).find('.text1').artTxtCount($(this).find('.tips'), 108);
  });
});
</script>

3.相应的html结构

<div class="form-group">
  <div class="col-sm-9">
    <label class="col-sm-1 control-label" for="form-field-1"> 内容: </label>
  </div>
</div>
<div style="padding-left:100px;" id="autoTxtCount" class="autoTxtCount form-group">
  <div >
    <textarea class="text1" name="content" cols="50" rows="3"><!--{$aData.content}--></textarea>
  </div>
  <div>
    <span class="tips"></span> 
  </div>
</div>

4.一些样式

#autoTxtCount { width:500px; }
#autoTxtCount .help, #autoTxtCount .help a { color:#999; }
#autoTxtCount .tips { color:#999; padding:0 5px; }
#autoTxtCount .tips strong { color:#1E9300; }
#autoTxtCount .tips .js_txtFull strong { color:#F00; }
#autoTxtCount textarea.text1 { width:474px; }

效果如下:

jQuery扩展实现text提示还能输入多少字节的方法

jQuery扩展实现text提示还能输入多少字节的方法

更多关于jQuery相关内容可查看本站专题:《jQuery扩展技巧总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
AngularJs每天学习之总体介绍
Aug 07 Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
Bootstrap框架实现广告轮播效果
Nov 28 #Javascript
ReactJs快速入门教程(精华版)
Nov 28 #Javascript
js窗口震动小程序分享
Nov 28 #Javascript
JS获取年月日时分秒的方法分析
Nov 28 #Javascript
js中string和number类型互转换技巧(分享)
Nov 28 #Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 #Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 #Javascript
You might like
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
js使用for循环及if语句判断多个一样的name
2014/09/09 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
Vue数组响应式操作及高阶函数使用代码详解
2020/08/01 Javascript
vue-cli打包后本地运行dist文件中的index.html操作
2020/08/12 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
浅析python协程相关概念
2018/01/20 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Puppeteer使用示例详解
2019/06/20 Python
python 生成器需注意的小问题
2020/09/29 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
英国领先的酒类网上商城:TheDrinkShop
2017/03/16 全球购物
项目合作计划书
2014/01/09 职场文书
一年级学生期末评语
2014/04/21 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
教师党员整改措施
2014/10/24 职场文书
党课主持词大全
2015/06/30 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript