主要解决难点：
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="3" style="word-break:break-all;overflow:hidden; position:absolute;top:200px; left: 220px; font-family:Arial, Helvetica, sans-serif; 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; 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",20,3) //获得输入结果 数组形式，返回每行类容 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(" "); len=dInfo.length; if(len>maxRow) { console.log("行数超限,自动删除超行部分"); dInfo.splice(maxRow); len=maxRow; } formatInfo="" for(var i=0;i<len;i++) { //判断每行是否 > maxCol var arr=getBreak(dInfo[i]) if(arr.length>0) { var _temp=dInfo[i],add=""; for(var j=0;j<arr.length;j++) { var sNum=j==0?0:arr[j-1] var eNum=j==0?arr[j]:arr[j]-arr[j-1] add+=_temp.substr(sNum,eNum)+" "; } add+=_temp.substr(arr[j-1]); dInfo[i]=add; } //组装 formatInfo+=dInfo[i]+(i<len-1?" ":"") } document.getElementById(bind).value=formatInfo; _s.message=formatInfo.split(" ");//这里有个逻辑问题，理论不会产生。暂未处理 } function getBreak(v) { if(v==""){return [];} var arr=[]; var len=0; //中英字符长度计数 var count=0; //实际字符个数计数 var temp=-1; //判断换行。（例如 每行限制20字符，上一次检测为19字符，下一次+2字符 则跳过了） var lastCount=0;// 和上一个参数配合使用 如果是跳过，则使用此参数 //计算 for(i=0;i<v.length;i++) { var c = v.charCodeAt(i); if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) { len++;} else {len += 2;} count++; //不是首行第0个 空字符 var cut=Math.floor(len/maxCol) if(temp!=-1&&cut!=temp) { //跳过 if(len%maxCol!=0) { arr.push(lastCount) } else //正好 { arr.push(count) } } temp=cut; lastCount=count; } //矫正， 如果刚好是临界值 则抹去最后一次换行 if(len%maxCol==0&&arr.length>0) { arr.splice(arr.length-1,1) } return arr } return this; } </script> </html>
测试 通过：
pc:
chrome,firefox,safira,
ios
微信（safira）,
android
微信（x5）
其他未测 ，如使用中发现问题请回帖反馈
PS：如果实时监测会导致输入问题，可以去掉实时监测，仅监听textarea失去输入焦点时，执行一次代码即可 。
中文标点 。 ？ ！ ， 、 ； ： “ ” ‘ ' （ ） 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ～ ﹏ ￥