提示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,如需转载请自行联系原作者

相关文章
|
13天前
|
存储 弹性计算 人工智能
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
2025年9月24日,阿里云弹性计算团队多位产品、技术专家及服务器团队技术专家共同在【2025云栖大会】现场带来了《通用计算产品发布与行业实践》的专场论坛,本论坛聚焦弹性计算多款通用算力产品发布。同时,ECS云服务器安全能力、资源售卖模式、计算AI助手等用户体验关键环节也宣布升级,让用云更简单、更智能。海尔三翼鸟云服务负责人刘建锋先生作为特邀嘉宾,莅临现场分享了关于阿里云ECS g9i推动AIoT平台的场景落地实践。
【2025云栖精华内容】 打造持续领先,全球覆盖的澎湃算力底座——通用计算产品发布与行业实践专场回顾
|
5天前
|
云安全 人工智能 安全
Dify平台集成阿里云AI安全护栏,构建AI Runtime安全防线
阿里云 AI 安全护栏加入Dify平台,打造可信赖的 AI
|
12天前
|
人工智能 自然语言处理 自动驾驶
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
关于举办首届全国大学生“启真问智”人工智能模型&智能体大赛决赛的通知
|
8天前
|
人工智能 运维 Java
Spring AI Alibaba Admin 开源!以数据为中心的 Agent 开发平台
Spring AI Alibaba Admin 正式发布!一站式实现 Prompt 管理、动态热更新、评测集构建、自动化评估与全链路可观测,助力企业高效构建可信赖的 AI Agent 应用。开源共建,现已上线!
780 23
|
7天前
|
人工智能 Java Nacos
基于 Spring AI Alibaba + Nacos 的分布式 Multi-Agent 构建指南
本文将针对 Spring AI Alibaba + Nacos 的分布式多智能体构建方案展开介绍,同时结合 Demo 说明快速开发方法与实际效果。
499 37
|
7天前
|
机器学习/深度学习 人工智能 搜索推荐
万字长文深度解析最新Deep Research技术:前沿架构、核心技术与未来展望
近期发生了什么自 2025 年 2 月 OpenAI 正式发布Deep Research以来,深度研究/深度搜索(Deep Research / Deep Search)正在成为信息检索与知识工作的全新范式:系统以多步推理驱动大规模联网检索、跨源证据。
492 41
|
2天前
|
文字识别 监控 物联网
这是我写的实施一地两检的跨境高铁站旅客资料预报系统的系统架构
本文设计了一套基于IAPIS理念的高铁跨境旅客预报与边检联动系统,覆盖青青草原内地与喜羊羊特别行政区间“一地两检”场景。系统在旅客购票后即采集证件、生物特征及行程信息,通过Advance Passenger Info Checker等模块,向出发地和目的地移民管理机构实时推送数据,实现出入境许可预审。支持线上/线下购票、检票、退票全流程管控,结合面部识别、行为追踪技术监控旅客状态,防止滞留或非法通行。列车发车前进行最终核验,确保所有跨境旅客获边检许可。若旅行被中途取消,系统自动改签、退票并通知各方,保障安全与效率。(239字)