主要解决难点：

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. Hibernate不能自动建表解决办法

    最近开始学Hibernate,看的是李刚的那本<轻量级java ee企业应用实战>.头一个hibernate程序,我原原本本的按照书上例子写下来,同时只是改动了些mysql的连接参数,并且 ...

  2. nginx----------------环境搭建遇到的一些问题汇总--（多域名配置，配置文件修改问题）

    nginx的启动命令是:(通用) /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 重启命令: /usr/local/ng ...

  3. C# (灰度)加权平均法将图片转换为灰度图

    private Bitmap ToG(string file) { using (Bitmap o = new Bitmap(file)) { Bitmap g = new Bitmap(o.Widt ...

  4. MySQL的下载与安装 和 navicat for mysql 安装使用

    新手上路-MySQL安装 目录结构 Windows平台 MySQL安装 示例数据导入 Linux平台 CentOS系统 Ubuntu系统 FAQ 密码生成工具-keepass 修改提示符 图形工具 删 ...

  5. HDU 5458 Stability（双连通分量+LCA+并查集+树状数组）（2015 ACM/ICPC Asia Regional Shenyang Online）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5458 Problem Description Given an undirected connecte ...

  6. 家长-Parents表增加字段Token，Gender，Email，Portrait

    家长-Parents表增加字段Token,Gender,Email,Portrait ) ) ) )

  7. Oracle中的日期加减

    加法   select sysdate,add_months(sysdate,12) from dual;        --加1年 select sysdate,add_months(sysdate ...

  8. matlab画柱状图

    论文中需要画图进行比较,感觉还是matlab画起来比较方便,先把自己画的图及matlab代码放上. y=[300 311;390 425; 312 321; 250 185; 550 535; 420 ...

  9. Map三种遍历方式

    Map三种遍历方式 package decorator; import java.util.Collection; import java.util.HashMap; import java.util ...

  10. Xcode Build Settings Architectures

    http://foggry.com/blog/2014/05/09/xcodeshe-zhi-xiang-zhi-architectureshe-valid-architectures/ https: ...