主要解决难点：

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. SQL用先进先出存储过程求出库数量

    create table t( id ,), name ),--商品名称 j int, --入库数量 c int, --出库数量 jdate datetime --入库时间 ) ,,'2007-12- ...

  2. WORD学习之插入分页符

    我们在用Word编辑文档时,不可避免的需要对文档进行页面布局,才能使得文档看起来更加美观.有时候会使用到分页符,下面就简单介绍一下分页符 分页符 主要作用: 1.若要把两段分开在两页显示时,把光标定位 ...

  3. NDK开发—基础知识实战Demo

    简介 前面写了几篇NDK相关的文章: NDK开发-简介&环境搭建(Eclipse,Android Studio) NDK开发-Android Studio+gradle-experimenta ...

  4. Java多线程开发系列之番外篇：事件派发线程---EventDispatchThread

    事件派发线程是java Swing开发中重要的知识点,在安卓app开发中,也是非常重要的一点.今天我们在多线程开发中,穿插进来这个线程.分别从线程的来由.原理和使用方法三个方面来学习事件派发线程. 一 ...

  5. 学习js回调函数

    <!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...

  6. 敏捷项目开源管理软件ScrumBasic（2）- 多项目支持

    1.加入Project对象模型 public class Project { [Key] [MaxLength(32)] public string ID { get; set; } public s ...

  7. Delphi Json

    superobject.pas单元对json的解析非常方便, 力荐 下面演示对如下json的解析 { ", "memo": "S.H.E 004" } ...

  8. UVa 10917 Dijkstra

    本来就是水题一道. 题意:一个人要从点1去到点2,中间还有很多点和很多条边.问你如果他每次走的边(a,b)都满足:a点到目标点的最短距离<b点到目标点的最短距离,那么他从点1出发到点2总共有多少 ...

  9. 误用的volatile

    在嵌入式编程中,有对某地址重复读取两次的操作,如地址映射IO.但如果编译器直接处理p[0] = *a; p[1] = *a这种操作时,往往会忽略后一个,而直接使用前一个已计算的结果.这是有问题的,因为 ...

  10. cocos2d-x quick 学习 二 Hello world

    总算找到问题了. 这几天一直在招问题没有找到原因. 为什么按照文档就不能建立新的项目.  不能建立自己的 hello world 我之前下载的源码文件 quick-cocos2d-x-2.2.5   ...