文本框 textarea 动态显示行数（简单文本编辑器）

工作需求做一个文本编辑器简单的。

右边输入文字，左边会显示相应的代码行。清空也会变为1.

废话不多说上代码，自己理解。

<style type="text/css">
*{margin: 0; padding: 0;}
html,body{height: 100%; margin: 0; padding: 0;font: 12px/1.5 tahoma, arial, 'hiragino sans gb', 'microsoft yahei', sans-serif;-webkit-font-smoothing: antialiased;}
#mian{ width:640px; height:100%;}
#leftBox{background:#ecf0f5;width:35px; height:100%; text-align:left; float: left;}
#test{border:1px solid #eaeaea; outline:none; width:600px; height:100%; resize: none; background: rgb(250,250,250); line-height: 24px;font-size: 14px;float: left; padding:10px 8px;  color: black; font-family: inherit; box-sizing: border-box;}
#leftNum{ height:100%; width: 100%; resize: none;outline:none; overflow-y: hidden; overflow-x: hidden; border: 0; background: rgb(247,247,247); color: #999;line-height: 24px;font-size: 14px; padding:10px 4px; text-align: right; font-weight: bold; box-sizing: border-box;}
</style>

 <div id="mian">
     <div id="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea></div>
     <textarea id="test" name="content" onkeydown="keyUp()" onscroll="getId('leftNum').scrollTop = this.scrollTop;">
     </textarea>
 </div>
 <script type="text/javascript">
 var num = "";
 var btn = getId('btn');
 var test = getId('test');
 function getId(obj) {
     return document.getElementById(obj);
 }
 function keyUp(){
     var str = test.value;
     str = str.replace(/\r/gi,"");
     str = str.split("\n");
     n = str.length;
     line(n);
 }
 function line(n){
     var lineobj = getId("leftNum");
     for(var i = 1;i <= n;i ++){
        if(document.all){
         num += i + "\r\n";//判断浏览器是否是IE
        }else{
         num += i + "\n";
        }
     }
     lineobj.value = num;
     num = "";
 }

 (function() {
     keyUp();
 })();
 </script>