JavaScript实现文本框显示行号

<div id="box">     // div ---> ③
	<div id="line"></div>    // div ---> ①
	<textarea id="textarea" rows="5" cols="40"></textarea>   // div ---> ②
</div>

	*{
	margin: 0;
	padding: 0;
	}
	#box{
		height: 100px;
		margin-left: 40%;
		margin-top: 20%;
	}
	#line{
		width: 20px;
		height: 100px;     /* !!! ①的高度 */
		float: left;
		background-color: #ccc;
		overflow: hidden;
	}
	#textarea{
		border-left: none;
		line-height: 20px;
		height: 98px;      /* !!! ②的高度，因为边框所以 -2 */
	}
	.row{                 /* 显示行数的div */
		color: #999;
		text-align: center;
		width: 20px;
		font-size: 15px;
		height: 20px;
	}

<script type="text/javascript">
		window.onload = function () {
			var textArea = document.getElementById("textarea");

			addHandler(textArea,'keyup',function(){
				onKeyUp(textArea);
			});

			addHandler(textArea,'scroll',function(){
				onScrollChange(textArea);
			})
		}
		//键盘点一下就判断换行情况
		function onKeyUp(textArea){
			var line = document.getElementById("line");
			line.innerHTML = "";
			var text = textArea.value.split("\n");
			for(var i=0;i<text.length;i++){
				var row = document.createElement("div");
				if(i==0){
					row.id = "fir";
				}
				row.className = "row";
				row.innerHTML = i+1;
				line.appendChild(row);
			}
			document.getElementById("fir").style.marginTop = -textArea.scrollTop + "px";
		}
		//文本框滚动条滚动行号也跟着滚动
		function onScrollChange(textArea){
			document.getElementById("fir").style.marginTop = -textArea.scrollTop + "px";
		}
		//考虑浏览器事件添加
		function addHandler(element,type,handler){
			if(element.addEventLister){
				element.addEventLister(type,handler,false);
			}else if(element.attachEvent){
				element.attachEvent('on'+type,handler);
			}else {
				element['on'+type] = handler;
			}
		}