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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
Aug 21 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
Netbeans 8.2将支持PHP7 更精彩
2016/06/13 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
如何在PHP中读写文件
2020/09/07 PHP
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
JS 实现获取打开一个界面中输入的值
2013/03/19 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
js style动态设置table高度
2014/10/21 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
layui表格实现代码
2017/05/20 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
vue实现百度语音合成的实例讲解
2019/10/14 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
Python列表计数及插入实例
2014/12/17 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python实现双色球随机选号
2020/01/01 Python
python 负数取模运算实例
2020/06/03 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
商务英语专业自荐信
2013/10/14 职场文书
超级搞笑检讨书
2014/01/15 职场文书
公开承诺书格式
2014/05/21 职场文书
小区推广策划方案
2014/06/06 职场文书
新学期开学标语
2014/06/30 职场文书
就业协议书怎么填
2014/09/15 职场文书
2014年公路养护工作总结
2014/12/04 职场文书