主要解决难点：

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. MWeb 1.6 发布！Dark Mode、全文搜寻、发布到Wordpress、Evernote 等支持更新、编辑/预览视图模式等

    Dark Mode 使用 View - Dark Mode 或快捷键 CMD + Option + L 开启或关闭 Dark Mode.可以在设置中设置 Dark Mode 状态下编辑器所使用的样式, ...

  2. sdk命令

    SDK命令 常用sdk命令 开启adb服务:adb start -server 关闭adb服务:adb kill -server 查看模拟器/真机:adb devices 安装/卸载/运行程序: 安装 ...

  3. LinQ 简单使用

    LinQ: 1.LinQ to Sql类(NET Language Integrated Query (LINQ) ) LINQ定义了大约40个查询操作符,如select.from.in.where以 ...

  4. Windows Phone 十三、吐司通知

    弹出通知对话框 <Grid> <Button Content="弹出通知" Click="Button_Click"/> </Gr ...

  5. 浅谈js回调函数

    回调函数原理: 我现在出发,到了通知你”这是一个异步的流程,“我出发”这个过程中(函数执行),“你”可以去做任何事,“到了”(函数执行完毕)“通知你”(回调)进行之后的流程 例子 1.基本方法 ? 1 ...

  6. 常用的yum命令

    linux各发行版有多种包管理机制,下面介绍基于RedHat系的yum包管理命令:   yum -y install xxx         无需询问,安装xxx包   yum list        ...

  7. python学习笔记系列----（六）错误和异常

    python至少有2类不同的错误:语法错误(Syntax Errors)和异常(Exceptions). 8.1 语法错误 这个单词应该还是很有必要认识的,呵呵,语法错误,也叫解析错误,是我们最不愿意 ...

  8. gulp编译sass

    前言:前段时间学习了sass语法,但是一直用的是"考拉"这个软件工具将我写的sass代码编译成css,然后再引用到项目里面去的,随着对sass的更加深入的了解,我开始尝试着将sas ...

  9. eclipse左侧不见

    我的解决办法: eclipse--->  Window --->Perspective--> Open Perspective-->Java

  10. HDU 3221 Brute-force Algorithm

              题意:问funny被调用了多少次,结果ModP,P不一定为质数.   首先很容易发现递推公式fn=fn-1*fn-2;写出前几项a,b,a*b,a*b^2,a^2*b^3,a^3* ...