主要解决难点：

1 中文 全角2字符深深的恶意

2 多行输入textarea 手动，自动换行问题

3 获得每行内容

原创，转载请注明出处！

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>textarea</title>

</head>

<body style="margin:0px; background:#000">

    <textarea id="ipt" placeholder="输入试试" rows=""  style="word-break:break-all;overflow:hidden; position:absolute;top:200px; left: 220px; font-family:Arial, Helvetica, sans-serif; width:400px; height:120px; line-height:40px; color:#FFF; font-size:20px; text-align:center;background-color:transparent;" ></textarea>

       <input id="sub" type="button" value="获得结果"  style=" position:absolute; width:200px; height:100px; left:220px; top:500px"/>

</body>

<script>

//-------------textarea 多行输入，限制字数与行数

//中 英 全半角 混检

//luoee2008@126.com  2016.10.06

//-------------重要说明--很重要

//textarea 的css需设置word-break:break-all 主要因为英文单词的原因。

//textarea 的宽度必须大于 每行的最大字符数占用的宽度 ，建议输入同等字符的0占位测试

//-------------参数说明

//bind;// 需要绑定的 textarea id

//maxCol;//每行最大字符数，汉字、中文标点算2字符

//maxRow;//最多行数

//-------------使用方式

var info=new AUTO_WRAP("ipt",,)

//获得输入结果 数组形式，返回每行类容

document.getElementById("sub").addEventListener("click",function(e)

{

    alert(info.message)

})

//----------------------------------核心代码----------------------------------

function AUTO_WRAP(bind,maxCol,maxRow)

{

    var _s=this;this.message

    var inter=setInterval(format,16.6667);//有兴趣的可以使用requestAnimationFrame

    var onInput=false;//是否正在输入中文

    document.getElementById(bind).addEventListener("compositionstart",function(e){ onInput=true;    })

    document.getElementById(bind).addEventListener("compositionend",function(e){onInput=false;    })

    function format()

    {

        if(onInput){console.log("正在输入中文,暂停检测！");return;}
　
        var dInfo="",formatInfo,len,_se

        dInfo = document.getElementById(bind).value;

        dInfo = dInfo.split("\n");

        len=dInfo.length;

        if(len>maxRow)

        {

            console.log("行数超限,自动删除超行部分");

            dInfo.splice(maxRow);

            len=maxRow;

        }

        formatInfo=""

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

        {

            //判断每行是否 > maxCol

            var arr=getBreak(dInfo[i])

            if(arr.length>)

            {

                var _temp=dInfo[i],add="";

                for(var j=;j<arr.length;j++)

                {

                    var sNum=j==?:arr[j-]

                    var eNum=j==?arr[j]:arr[j]-arr[j-]

                    add+=_temp.substr(sNum,eNum)+"\n";

                }

                add+=_temp.substr(arr[j-]);

                dInfo[i]=add;

            }

            //组装

            formatInfo+=dInfo[i]+(i<len-?"\n":"")

        }

        document.getElementById(bind).value=formatInfo;

        _s.message=formatInfo.split("\n");//这里有个逻辑问题，理论不会产生。暂未处理

    }

    function getBreak(v)

    {

        if(v==""){return [];}

        var arr=[];

        var len=; //中英字符长度计数

        var count=; //实际字符个数计数

        var temp=-; //判断换行。（例如 每行限制20字符，上一次检测为19字符，下一次+2字符 则跳过了）

        var lastCount=;// 和上一个参数配合使用   如果是跳过，则使用此参数

        //计算

        for(i=;i<v.length;i++)

        {

            var c = v.charCodeAt(i);

            if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {    len++;}    else {len += ;}

            count++;

            //不是首行第0个 空字符

            var cut=Math.floor(len/maxCol)

            if(temp!=-&&cut!=temp)

            {

                //跳过

                if(len%maxCol!=)

                {

                    arr.push(lastCount)

                }

                else //正好

                {

                    arr.push(count)

                }

            }

            temp=cut;

            lastCount=count;

        }

        //矫正， 如果刚好是临界值 则抹去最后一次换行

        if(len%maxCol==&&arr.length>)

        {

            arr.splice(arr.length-,)

        }

        return arr

    }

    return this;

}

</script>

</html>

测试 通过：

pc:

　　chrome,firefox,safira,

ios

　　微信（safira）,

android

　　微信（x5）

其他未测 ，如使用中发现问题请回帖反馈

PS：如果实时监测会导致输入问题，可以去掉实时监测，仅监听textarea失去输入焦点时，执行一次代码即可 。

中文标点 。 ？ ！ ， 、 ； ： “ ” ‘ ' （ ） 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ～ ﹏ ￥

【所见即所得】textarea 精确限制字数、行数，中、英、全半角混检 。源码带注释的更多相关文章

  1. 使用C#重写网上的60行 Javascript 俄罗斯方块源码 (带注释)

    在很久很久以前,就已经看过 60行Js的俄罗斯方块源码.无奈当时能力不够看明白,当时觉得就是个神作. 现在总算有空再看了,顺便用c#实现一遍(超过60行),顺道熟悉下Js API. 网上其他博客也有分 ...

  2. Tyrion中文文档（含示例源码）

    Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Tyrion主要有两大重要动能: 表单 ...

  3. Tyrion 中文文档（含示例源码）

    原文出处: Mr.Seven   Tyrion是一个基于Python实现的支持多个WEB框架的Form表单验证组件,其完美的支持Tornado.Django.Flask.Bottle Web框架.Ty ...

  4. Spring中AOP相关的API及源码解析

    Spring中AOP相关的API及源码解析 本系列文章: 读源码,我们可以从第一行读起 你知道Spring是怎么解析配置类的吗? 配置类为什么要添加@Configuration注解? 谈谈Spring ...

  5. sqlserver和oracle中对全半角的转换

    oracle中对全半角的转换 to_single_byte(c)转换成半角 to_multi_byte(c)转换成全角 SELECT To_single_byte('881898?71') FROM ...

  6. （转）Eclipse中需要查看某个类的源码，直接按住Ctrl 然后点击想要查看的类或则方法

      文章转自:http://blog.sina.com.cn/s/blog_52f623240102vpcr.html   在Eclipse中需要查看某个类的源码,直接按住Ctrl 然后点击想要查看的 ...

  7. java中的==、equals()、hashCode()源码分析（转载）

    在java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际的编程总结一下. 1. ==  java中的==是比较两个对象在JVM中的地址.比较好理解.看下面的代码: ...

  8. maven项目在eclipse中debug时看不到源码？

    就像图中一样,看不到源码,但是能step over,也可查看变量值,点击edit source lookup path,选定项目的一瞬间源码会出来,但马上又变回原样了,求大神指教~ 我也遇到这个问题了 ...

  9. Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析

    Java生鲜电商平台-SpringCloud微服务架构中网络请求性能优化与源码解析 说明:Java生鲜电商平台中,由于服务进行了拆分,很多的业务服务导致了请求的网络延迟与性能消耗,对应的这些问题,我们 ...

随机推荐

  1. ANE 从入门到精通 --- 使用R* 访问资源

    在AIR4.0版本之前,ANE内无法使用R*,操作资源仅能使用getResourceID(). 对于接SDK来说尤为头疼. 不过4.0以后可以通过在打包时候指定platform.xml来直接使用R*访 ...

  2. jquery jQuery-File-Upload 例子

    网上jquery-file-upload的例子 都过于简单,在项目中这个插件经常使用,写个例子供参考. 下面介绍 用插件实现图片异步上传的代码. 1   比要的js一个都不能少,他们之间是有依赖关系的 ...

  3. 什么情况下会用到try-catch

    本文不区分语言,只为记录一次有收获的面试. 面试官:什么情况下用到try-catch?程序员:代码执行预料不到的情况,我会使用try-catch.面试官:什么是预料不到的情况呢?程序员:比如我要计算a ...

  4. js执行环境的深入理解

    第一个例子中 :之所以每个函数都返回不同的值的原因 有2点 (简写如下文) 就是[SCOPE]内部属性,函数可能拥有相同的父作用域时,多个函数引用同一个[SCOPE]属性,所以return i的值还是 ...

  5. SQL语句处理一些修改、新增、删除、修改属性操作（MySql）

    方法一: 直接(手动)去修改数据库名称,数据库表名称,数据库列名称.列属性 方法二: 使用SQL语句去修改 -- 修改表名 ALTER TABLE tableName RENAME newTableN ...

  6. C++之流与文件

    C++中,输入输出采用流来进行,例如iostream库中的 cin 和 cout .对文件进行读写操作也使用流.可以将文件与流关联起来,然后对文件进行操作.要将流与文件关联起来,必须像声明变量那样声明 ...

  7. 在Ubuntu上安装有道词典

    4月20日,由有道词典和Deepin团队共同完成的有道词典Linux版终于上线了,首先 推出Deepin和Ubuntu两个系统版本及其他版本的二进制包,估计以后还会有RPM 等版本.有道Linux版界 ...

  8. 无光驱在32位windows系统下安装64位windows系统

    位的系统. 大家都知道,32位的操作系统最多只能支持3.2G的内存,现在内存白菜价,很多人都在原有基础上购入新内存,这样最少也有4G了,为了让内存不浪费,我 们只有升级到64位操作系统.但是很多朋友又 ...

  9. Node判断文件是否链接

    通过fs.stat(), fs.lstate() and fs.fstate()都可以得到fs.Stats对象, 其中stats.isSymbolicLink()方法用来判断是否链接, 然而一直都不成 ...

  10. 使用C#反射中的MakeGenericType函数，来为泛型方法和泛型类指定（泛型的）类型

    C#反射中的MakeGenericType函数可以用来指定泛型方法和泛型类的具体类型,方法如下面代码所示这里就不多讲了,详情看下面代码一切就清楚了: using System; using Syste ...