主要解决难点：

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. WebForm 页面传值

    一.使用Querystring Querystring是一种非常简单的传值方式,其缺点就是会把要传送的值显示在浏览器的地址栏中,并且在此方法中不能够传递对象.如果你想传递一个安全性不是那么太重要或者是 ...

  2. SQLServer中用先进先出思想求成本价和平均成本单价

    1.首先是创建表: create table #in ( id ,), TDate datetime not null, goodcode ) , InNum ,) null, --入库数量 Pric ...

  3. Tomcat使用，部署

    Tomcat服务器基本使用 web服务软件,也叫web服务器软件,web服务器. 基本使用 1)下载 到apache官网下载. http://www.apache.org 安装版本:window  e ...

  4. Java多线程开发系列之四：玩转多线程（线程的控制2）

    在上节的线程控制(详情点击这里)中,我们讲解了线程的等待join().守护线程.本节我们将会把剩下的线程控制内容一并讲完,主要内容有线程的睡眠.让步.优先级.挂起和恢复.停止等. 废话不多说,我们直接 ...

  5. nodejs回调函数

    阻塞代码实例: main.js var fs=require("fs"); var data=fs.readFileSync("1.txt"); console ...

  6. maven 构建一个web项目

    maven已经大型的Java项目的管理工具,其功能非常强大,这里简单总结一下maven构建web项目的过程.本文介绍的是集成环境下的maven构建web项目. 一.准备 1.安装maven. 2.把m ...

  7. [Effective JavaScript 笔记]第45条：使用hasOwnProperty方法以避免原型污染

    之前的43条,44条讨论了属性的枚举,但都没有彻底地解决属性查找中原型污染的问题.看下面关于字典的一些操作 'zhangsan' in dict; dict.zhangsan; dict.zhangs ...

  8. 《C++ API设计》作者Martin Reddy访谈问题征集

    Martin Reddy博士是软件行业的一名老兵,有着15年以上的从业经验,共撰写过40多篇论文,拥有3项软件专利,并与他人合著了Level of Detail for 3D Graphics.另外, ...

  9. js封装类

    1.闭包函数中定义基类,使用基类定义类方法 ;var Appkit = function() { //定义类 var obj = new Object(); // 定义方法 obj.isWeixin ...

  10. WPF中实例化Com组件，调用组件的方法时报System.Windows.Forms.AxHost+InvalidActiveXStateException的异常

    WPF中实例化Com组件,调用组件的方法时报System.Windows.Forms.AxHost+InvalidActiveXStateException的异常 在wpf中封装Com组件时,调用组件 ...