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监听浏览器的问题
Jun 23 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
Bootstrap实现带动画过渡的弹出框
Aug 09 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
JavaScript 下载svg图片为png格式
Jun 21 Javascript
原生JS实现微信通讯录
Jun 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP版本如何选择?应该使用哪个版本?
2015/05/13 PHP
php array_walk_recursive 使用自定的函数处理数组中的每一个元素
2016/11/16 PHP
用Javascript读取中文COOKIE的解决办法
2007/02/15 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
javascript实现可改变滚动方向的无缝滚动实例
2013/06/17 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
2019/09/04 Javascript
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
JS如何生成动态列表
2020/09/22 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
python选择排序算法的实现代码
2013/11/21 Python
Python中实现三目运算的方法
2015/06/21 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
python assert的用处示例详解
2019/04/01 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
美国五金商店:Ace Hardware
2018/03/27 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
2015教师个人工作总结范文
2015/03/31 职场文书
证券区域经理岗位职责
2015/04/10 职场文书