请选择 进入手机版 | 继续访问电脑版

无忧编程_ASP.NET  / C# / PHP 程序员的软件世界

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 105|回复: 0

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

[复制链接]

262

主题

289

帖子

1172

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1172
发表于 2017-9-21 13:34:13 | 显示全部楼层 |阅读模式
C#控制textarea 精确限制字数、行数,中、英、全半角混检方法
主要解决难点:
1 中文 全角2字符深深的恶意
2 多行输入textarea 手动,自动换行问题
3 获得每行内容
[C#] 纯文本查看 复制代码
<!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("正在输入中文,暂停检测!")}
        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[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)

其他未测

windows .net(C#+MSSQL) linux(php+mysql)  
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|软件编程 Inc.  

GMT+8, 2017-12-17 12:11 , Processed in 0.137804 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表