文章出處
文章列表
主要解決難點：
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; 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",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("正在輸入中文,暫停檢測！")}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=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)+"\n"; } add+=_temp.substr(arr[j-1]); dInfo[i]=add; } //組裝 formatInfo+=dInfo[i]+(i<len-1?"\n":"") } document.getElementById(bind).value=formatInfo; _s.message=formatInfo.split("\n");//這里有個邏輯問題，理論不會產生。暫未處理 } 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失去輸入焦點時，執行一次代碼即可 。
文章列表
全站熱搜
留言列表
