MinTao.Net 发表于 2017-9-21 13:34:13

C#控制textarea 精确限制字数、行数,中、英、全半角混检方法

C#控制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; 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.com2016.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("正在输入中文,暂停检测!")}
      if(onInput){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=0;i<len;i++)
      {
            //判断每行是否 > maxCol
            var arr=getBreak(dInfo)
            if(arr.length>0)
            {
                var _temp=dInfo,add="";
               
                for(var j=0;j<arr.length;j++)
                {
                  var sNum=j==0?0:arr
                  var eNum=j==0?arr:arr-arr
                  add+=_temp.substr(sNum,eNum)+"\n";
                }
                add+=_temp.substr(arr);
                dInfo=add;
            }
            //组装
            formatInfo+=dInfo+(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)
其他未测 文章转自:http://www.cnblogs.com/luoeeyang/p/5949551.html
页: [1]
查看完整版本: C#控制textarea 精确限制字数、行数,中、英、全半角混检方法