网上很多方法,但都不可行,在判断换行符上,如果输入者按回车则可以分辨出换行,但是行输入满了后自动换行,却无法判断换行,试过控制每行字数30后加入换行符一个换行,但无法实现,,,,,我的代码如下:       function textCounter(field, lines) 
       { 
            var arr = field.value.split("\n"); 
            var perLine = ""; 
            var value = ""; 
             
            if (arr.length < lines)
             lines = arr.length; 
             
            for (loop = 0; loop < lines; loop++) 
            { 
                perLine = arr[loop]; 
                if(perLine.length>30) 
                {
                    value = value + perLine+ "\r\n"; 
                 }
                 else{
                 value=value+perLine;
                 }            if (field.value != value) 
                field.value = value; 
            }         }

解决方案 »

  1.   

    用div 模拟<!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 runat="server">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>选择咨询单位</title>
        <style type="text/css">
    </style>
    </head>
    <body>
        
                <div id='divCenter' class='divCenter' style="width:400px; height:400px; background-color:Blue;float:left; border:1px solid red;">
                   <iframe id="SendMsg" name="SendMsg"  width="100%" height="100%" scrolling='auto' frameborder="0" src='about:blank'></iframe>
                   
                </div>
           
    </body><script type="text/javascript">var IframeSendMsg;
    window.onload=function()
    {
        var s=[];
        s.push('<!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>');
        if(document.frames && document.documentMode){s.push('<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>');}
        s.push('<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">html,body{font-size:15px;padding:2px;margin:0px;background-color:#FFF;word-wrap:break-word;word-break:break-all;overflow:auto;');
        if(document.frames)
        {
           s.push('height:auto;width:96%;');
        }else{
          s.push('height:95%;width:auto;');
        }
         s.push('} p{margin:0px;padding:0px;} img{border:0px;}</style></head><body></body></html>');
          if(document.frames)
            {
                IframeSendMsg = document.frames('SendMsg');
                IframeSendMsg.document.contentEditable='true';           
            }
            else
            {
                IframeSendMsg =$('SendMsg').contentWindow;
            }  
             IframeSendMsg.document.designMode = 'On';
             IframeSendMsg.document.open();
             IframeSendMsg.document.writeln(s.join(''));
             IframeSendMsg.document.close(); 
            
             IframeSendMsg.focus();  
    };
       
         
         // 绑定事件   var $ = function (id,obj) {  
        return 'string' == typeof(id) ? (obj||document).getElementById(id) : id;   
    }; </script></html>
      

  2.   

    楼主把问题说全面,怎么个情况,想怎么样。相关的代码都到位。
    你现在HTML和CSS都没有,30是怎么个效果。你这么处理合不合适。这些都没法说。
      

  3.   

    <asp:TextBox ID="textbox1" runat="server" style="height:150px; width:200px;"
                 TextMode="MultiLine" onkeydown="javacript:textCounter(this,5);" Rows="5"></asp:TextBox>
    就只想这样,这个textbox里,可最大可输入五行,硬回车换行和行满后自动换行都算换行,是五行,五行,,,,,,
      

  4.   

    二楼的DIV模拟,能输入,但是如何限制字数!!!!!!!!!!!
    不明白 ,无法控制,,,,,,,,,
      

  5.   

    首先放一个textarea用来提供输入
    <textarea id="test" style="width:100px;height:80px;overflow-y:hidden">
    一行
    两行
    三行
    四行
    五行
    一行
    两行
    三行
    四行
    五行
    </textarea>
    再放一个隐藏的textarea,这个textarea的样式跟用来输入的样式相同,唯一区别是这个的visibility是hidden,并且刚好有五行字。当然,你可以根据自己的情况计算出五行的总可滚动高度,然后把这个隐藏框省略掉
    <textarea id="test2" style="width:100px;height:80px;visibility:hidden">
    一行
    两行
    三行
    四行
    五行
    </textarea>
    <script type="text/javascript">
    var testObj=$("test");var testObj2=$("test2");
    //判断输入文字的框的可滚动距离是否超过被隐藏的框的可滚动距离,如果超过了,说明输入已超过五行
    alert(testObj.scrollHeight>testObj2.scrollHeight);
    </script>
      

  6.   

    。。
    我给你判断了是/否,你还不会根据这个做进一步操作?
    难道还是想全部copy现成的代码?还高度太微妙?
      

  7.   

    http://www.mcxb.com/WebPage/JavaScript/JavaScriptJiQiao/111687.html查到了点像样的方法,大家可以参考一下,找了好几天,..............................................
      

  8.   

    一般来说,textarea是会硬换行的,除非是一大段英文却没有空格,那么在页面上显示出来的时候就会撑开容器。你其实可以在提交的时候这样:
    var s = $('textarea').val();
    s = s.replace(/[a-z]{30}/gi, function(a) {return a + '<br/>'})); //如果发现一个单词的长度超过30个字符,则在中间加入"<br/>"
    当然,这个方法还是会有问题,不过我觉得是个好的思路。
      

  9.   

    其实楼主可以改变下思路控制输入行数的目的是什么?
    限制字数?保持页面友好?实际上,用户输入内容的复杂度可能超乎你的预计
    全角半角中文,大小写英文,各类特殊符号,
    要知道i和M是不一样长的
    你也许要计算每个任何可能出现的字符所占的长度及其总长才行字数和行数总有冲突的时候
    比如我输入300个i满5行
    但是可能输入150个汉字就满5行了
    就看你如何取舍了除非你严格限制用户只能输入长度一致的字符
    否则目前没有完美的解决方案
      

  10.   

          模仿目前各论坛留言回复的做法,比如CSDN,它是如何做到让文字自动换行的呢?
          一般都是用textarea,它有硬换行的功能,其他如果不行就用14#的正则替换行方式,虽然不能完美,但是也能尽可能做到一些兼容的考虑!      这是在FF下获取到的CSDN上的回复用到的输入口HTML:
         <textarea style="height: 180px; width: 700px;" id="tb_ReplyBody___Editor" cols="20" rows="2" name="tb_ReplyBody$_$Editor" class=" CsdnUbbEditor"></textarea>
         找到 CsdnUbbEditor这个样式名称,应该有对应的换行处理,另外加上正则替换处理,处理一些特殊情况。没必要所有都具备,能保证大众的普通需求就很不错了。
      

  11.   

    没错。我在实验里也感觉这是个问题,cols=30,但输入中文的话,也就是十多个就会自动折行。但在控制代码里仍按30计数,所以会出现视觉上的错位——本来应该是连贯的一句话在下一行中部被当作软回车给断开了。所以提问题最好把背景都交待清楚,看怎么解决更合适。而不是局限在一个可能已经走错方向的路上的一块石头面前。
      

  12.   


    <!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" />
    <style>
    textarea{border:#999 1px solid;width:100px;overflow:hidden;height:79px;line-height:15px;}
    </style>
    </head> 
    <body>
    <textarea id="test" onkeyup="return check()" onchange="return check()">
    </textarea>
    <!--隐藏框(刚好五行字)-->
    <!--<textarea id="test2" readonly="readonly">一行-->
    <textarea id="test2" style="visibility:hidden">一行
    两行
    三行
    四行
    五行</textarea>
    <input type="button"  value="检测" onclick="check()"/>
    <div id="result"></div>
    </body>
    </html>
    <script type="text/javascript">
    var inputText="";
    var $=function(id){
    return document.getElementById(id);
    };
    var check=function(){
    var testObj=$("test");var testObj2=$("test2");
    $("result").innerHTML=testObj.scrollHeight + "|" +testObj2.scrollHeight;
    //判断输入文字的框的可滚动距离是否超过被隐藏的框的可滚动距离,如果超过了,说明输入已超过五行
    if(testObj.scrollHeight>testObj2.scrollHeight){
    //超过行数,直接把inputText变量存储的内容赋值进去,输入的新内容直接丢弃
    testObj.value = inputText;
    }else{
    inputText = testObj.value;//没有超过行数,更新变量inputText为当前输入的内容
    }
    };
    </script>直接存成一个html试一下