提示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; }
复制代码


效果如下:

 

 



本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/4110657.html,如需转载请自行联系原作者

相关文章
|
6月前
|
C#
C# DEV TextEdit 设置文本框只能输入数字(整数)
C# DEV TextEdit 设置文本框只能输入数字(整数)
|
6月前
|
JavaScript
限制input框中的输入类型及长度
限制input框中的输入类型及长度
511 0
C#限制文本框只能输入指定的类型(汉字、数字)
C#限制文本框只能输入指定的类型(汉字、数字)
207 0
输入一个字符串,把其中的字符按逆序输出。如输入LIGHT,输出THGIL。要求用string方法。
输入一个字符串,把其中的字符按逆序输出。如输入LIGHT,输出THGIL。要求用string方法。
|
编解码
Debug栏打印时自动把Unicode编码转化成汉字
Debug栏打印时自动把Unicode编码转化成汉字
159 0
Debug栏打印时自动把Unicode编码转化成汉字
|
JavaScript
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入
输入超过规定长度error提醒,并实时显示输入长度,可无限输入
1029 0
VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入
用正则表达式限制input输入框只能输入整数的一段简单代码
要实现input框只能输入正整数,如果检测到输入其他类型的数据就直接为0;代码如下:
410 0
iOStextField/textView在输入时限制emoji表情的输入
又遇到输入框输入表情的情况了,之前写了一篇文章“UITextView/UITextField检测并过滤Emoji表情符号”http://www.jianshu.com/p/90d68e7e5d53,但是总觉得那两种方式都各有弊端,这次又遇到之后,仔细考虑了下之后,想到了用两种方式组合在一起使用,测试结果暂时没什么问题,在输入时就限制了emoji表情输入,完全符合需求。在此贴出代码,如果有什么问题,欢迎指正!