文本框 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>