• 【所见即所得】textarea 精确限制字数、行数,中、英、全半角混检 。源码带注释


    主要解决难点:

    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失去输入焦点时,执行一次代码即可 。

    中文标点 。 ? ! , 、 ; : “ ” ‘ ' ( ) 《 》 〈 〉 【 】 『 』 「 」 ﹃ ﹄ 〔 〕 … — ~ ﹏ ¥

  • 相关阅读:
    hdu2089 不要62 (数位dp)
    LightOJ 1140
    在n到m中 有多少个1 (数位dp)
    Frequent Subsets Problem 状态压缩 判断出现的次数
    LightOj 1215
    LightOJ 1197
    Spring 知识点提炼
    设计模式—访问者模式
    设计模式—模板模式
    设计模式—策略模式
  • 原文地址:https://www.cnblogs.com/luoeeyang/p/5949551.html
Copyright © 2020-2023  润新知