今天一个小弟问我的问题，在文本框中输入字符，如果超出指定长度，就把它截取，要求中文等于两个字符的长度，我找一下资料，把这个功能实现了，下面是JS代码：

<html>

<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>

<body>

    <input type="text" name="username" />

</body>

<script type="text/ecmascript">

    var GetLength = function (str) {

        ///<summary>获得字符串实际长度，中文2，英文1</summary>

        ///<param name="str">要获得长度的字符串</param>

        var realLength = 0, len = str.length, charCode = -1;

        for (var i = 0; i < len; i++) {

            charCode = str.charCodeAt(i);

            if (charCode >= 0 && charCode <= 128) realLength += 1;

            else realLength += 2;

        }

        return realLength;

    };


    //js截取字符串，中英文都能用

    //如果给定的字符串大于指定长度，截取指定长度返回，否者返回源字符串。

    //字符串，长度  

    /**

     * js截取字符串，中英文都能用

     * @param str：需要截取的字符串

     * @param len: 需要截取的长度

     */

    function cutstr(str, len) {

        var str_length = 0;

        var str_len = 0;

        str_cut = new String();

        str_len = str.length;

        for (var i = 0; i < str_len; i++) {

            a = str.charAt(i);

            str_length++;

            if (escape(a).length > 4) {

                //中文字符的长度经编码之后大于4

                str_length++;

            }

            str_cut = str_cut.concat(a);

            if (str_length >= len) {

                str_cut = str_cut.concat("...");

                return str_cut;

            }

        }

        //如果给定字符串小于指定长度，则返回源字符串；

        if (str_length < len) {

            return str;

        }

    }
$(function () { 
     $("input[name=username]").bind('keyup', function () {
      if (GetLength($(this).val()) > 10) { 
       $(this).val(cutstr($(this).val(), 10)); 
       return; 
     } 
  }); 
}); 
</script> 
</html>

效果如图：

aaarticlea/png;base64,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" alt="" />

JS~字符串长度判断，超出进行自动截取（支持中文）的更多相关文章

  1. js字符串长度计算(一个汉字==两个字符)和字符串截取

    js字符串长度计算(一个汉字==两个字符)和字符串截取 String.prototype.realLength = function() { return this.replace(/[^\x00-\ ...

  2. PHP针对中英文混合字符串长度判断及截取方法

    PHP自带的函数如strlen().mb_strlen()都是通过计算字符串所占字节数来统计字符串长度的,一个英文字符占1字节.例: $enStr = 'Hello,China!'; echo str ...

  3. css限制文字显示字数长度，超出部分自动用省略号显示,防止溢出到第二行

    为了保证页面的整洁美观,在很多的时候,我们常需要隐藏超出长度的文字.这在列表条目,题目,名称等地方常用到. 效果如下: 未限制显示长度,如果超出了会溢出到第二行里.严重影响用户体验和显示效果. 我们在 ...

  4. Oracle sql 子字符串长度判断

    Oracle sql 子字符串长度判断 select t.* from d_table t ,) ,instr(t.col,; 字符串的前两位都是数字: select * from d_table t ...

  5. js 字符串 常用处理方式(检索、截取、拼接、批量替换)

    // 检索(字符串中判断是否包含某个字符) 字符串.search('检索的内容');// 返回-1,不包含: 返回非-1,包含 字符串.indexOf("待判断的内容"); // ...

  6. 扩展entity framework core 实现默认字符串长度,decimal精度,entity自动注册和配置

    报道越短,事情越严重!文章越短,内容越精悍! 文章以efcore 2.0.0-preview2.测试验证通过.其他版本不保证使用,但是思路不会差太远.源代码 目标: 1.实现entity的自动发现和m ...

  7. js 字符串长度截取

    <script> function cutstr(str, len) { var temp, icount = 0, patrn = /[^\x00-\xff]/, strre = &qu ...

  8. 截取字符串长度，超出部分用省略号代替 PHP

    function subText($text, $length){ if (mb_strlen($text, 'utf8') > $length) { return mb_substr($tex ...

  9. js字符串常用判断方法

    转自:http://blog.sina.com.cn/s/blog_6819fa800100j5t6.html 一.方法介绍 function obj$(id)                     ...

随机推荐

  1. css.day.05.eg

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. WebStorm shortcuts.

  3. UIToolbar+UIWebView 浏览器

    创建界面 var webView : UIWebView! var toolBar : UIToolbar! let swiftWH = UIScreen.mainScreen().bounds.si ...

  4. display: -webkit-flex; 手机上图下文字，pad上有浮动。

    <article> <div class="boxt"> <div class="boxt-right"><img s ...

  5. USACO5.4-TeleCowmunication

    题目大意:给出一个无向图,要求删除尽量少的点,使给定的2点间不再连通,并输出字典序最小的方案题型:图论-网络流此题难点在于建图,后面就是套网络流的模板.将点看成边,例如第i个点可以看成一条有向边< ...

  6. ASP.NET MVC 缓存使用示例

    应该说,缓存的设计是一门较为复杂的学问,主要考虑的问题包括:要不要缓存?要缓存哪些数据?要缓存多少数据?要缓存多久?如何更新缓存(手动还是自 动)?将缓存放在哪里?本文将以较为通俗易懂的方式,来看一看 ...

  7. 深入Java虚拟机读书笔记第一章Java体系结构介绍

    第1章 Java体系结构介绍 Java技术核心:Java虚拟机 Java:安全(先天防bug的设计.内存).健壮.平台无关.网络无关(底层结构上,对象序列化和RMI为分布式系统中各个部分共享对象提供了 ...

  8. php网站判断用户是否是手机访问的方法

    PHP网站判断用户是否用手机访问,如果是手机的话,就跳转到指定的手机友好页面.随着移动设备的普及,网站也会迎来越来越多移动设备的访问.用适应PC的页面,很多时候对手机用户不友好,那么有些时候,我们需要 ...

  9. python运维开发之第十天

    一.多进程 1.进程模块 multiprocessing 简单的创建一个进程 #!/usr/bin/env python # -*- coding: utf- -*- # @Author : Will ...

  10. layer弹出标签层tab

    引入文件: <script type="text/javascript" src="layer/layer.min.js"></script& ...