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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
js实现右键自定义菜单
Dec 03 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
Aug 22 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 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下将XML转换为数组
2010/01/01 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php显示指定目录下子目录的方法
2015/03/20 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
python编写Logistic逻辑回归
2020/12/30 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python处理excel绘制雷达图
2019/10/18 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
电大物流学生的自我评价
2013/10/25 职场文书
高校毕业生自我鉴定
2013/10/27 职场文书
应届生人事助理求职信
2013/11/09 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
信息工作经验交流材料
2014/05/28 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
单位病假条范文
2015/08/17 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书