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

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

1.添加jQuery自定义扩展

$(函数($){ //tipWrap:提示消息的容器//maxNumber:最大输入字符$ .fn。arttxtcount=function(tipWrap，MaxNumber){ var count class=' js _ Txtcount '，//定义内部容器的半铸钢钢性铸铁(铸造半钢)类名fullClass='js_txtFull '，//定义超出字符的半铸钢钢性铸铁(铸造半钢)类名disabledClass=' disabled//定义不可用提交按钮半铸钢钢性铸铁(铸造半钢)类名//统计字数var count=function(){ var val=lenFOr($).修剪($(这个)。val()))；if(val=maxNumber){ tipwrap。html(' span class=' count class ' ' \ u8fd 8 \ u80FD \ u8f 93 \ u 5165 strong '(maxNumber-val)'/strong \ u4e 2a \ u5b 57 \ u 8282/span ')；} else { tipwrap。html(' span class=' count class ' ' full class ' ' \ u5df 2 \ u7ECF \ u8d 85 \ u51 fa strong '(val-maxNumber)'/strong \ u4E2A \ u5b 57 \ u 8282/span ')；};};$(这个)。bind('keyup change '，count)；归还这个；};});获取字节数函数

var LenFOr=function(str){ var Bytelen=0，len=str . length if(str){ for(var I=0；伊琳；I){ if(str。charcodeat(I)255){ Bytelen=3；} else { byteLen} }返回byteLen } else { return 0；}}2.实例化

脚本类型=' text/JavaScript '//demo $(function($){//批量$('.autoxtcount ').每个（函数(){ $(此)).查找(' .文本1 ').artTxtCount($(this).查找('。tips’)，108)；});});/script3 .相应的超文本标记语言结构

div class=' form-group ' div class=' col-sm-9 ' label class=' col-sm-1 control-label ' for=' form-field-1 '内容：/label/div/div style=' padding-left :100 px；'id=' autoxtcount ' class=' autoxtcount form-group ' div text area class=' text 1 ' name=' content ' cols=' 50 ' row=' 3 '！-{ $ AData。内容}-/文本区/div span class=' tips '/span/div/div 4 .一些样式

#自动文本计数{ width:500px} #自动文本计数.帮助，#自动文本计数.帮助{ color: # 999 } # autoTxtCount .技巧{ color : # 999 padd :0 5px } # autoxtcount .技巧强{ color: # 1E9300} #自动文本计数.小贴士js_txtFull .强{ color : # F00 } # autoxtcount text area。文本1 {宽度：474 px}效果如下：

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

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