<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TextArea Line Numbers Demo</title>
<style>
/*html {font:normal 76% verdana, arial, san serif;}*/
body {padding:2em;}
h2 {font-size:1.8em; padding:0.5em; background:#44aaff;width:603.5px;}
textarea {font-size:100%;}
#editContent{
margin-left:30px;
padding-left:3px;
width:600px;
height:200px;
border:1px solid #666;
}
.textAreaWithLines{
display:block;
margin:0;
border:1px solid #666;
border-right:none;
background:#aaa;
}
</style>
<script type="text/javascript">
function createTextAreaWithLines(id)
{
var el = document.createElement('TEXTAREA');
var ta = document.getElementById(id);
var string = '';
for(var no=1;no<300;no++){
if(string.length>0)string += '\n';
string += no;
}
el.className = 'textAreaWithLines';
el.style.height = (ta.offsetHeight-3) + "px";
el.style.width = "25px";
el.style.position = "absolute";
el.style.overflow = 'hidden';
el.style.textAlign = 'right';
el.style.paddingRight = '0.2em';
el.innerHTML = string; //Firefox renders \n linebreak
el.innerText = string; //IE6 renders \n line break
el.style.zIndex = 0;
ta.style.zIndex = 1;
ta.style.position = "relative";
ta.parentNode.insertBefore(el, ta.nextSibling);
setLine();
ta.focus();
ta.onkeydown = function() { setLine(); }
ta.onmousedown = function() { setLine(); }
ta.onscroll = function() { setLine(); }
ta.onblur = function() { setLine(); }
ta.onfocus = function() { setLine(); }
ta.onmouseover = function() { setLine(); }
ta.onmouseup = function() { setLine(); }
function setLine(){
el.scrollTop = ta.scrollTop;
el.style.top = (ta.offsetTop) + "px";
el.style.left = (ta.offsetLeft - 27) + "px";
}
}
</script>
</head>
<body>
<center>
<h2>TextArea Line Numbers Demo</h2>
<form name="form1" id="form1" action method="post">
<textarea name="editContent" id="editContent" wrap="off">The first line is here
The seconde line is here
I am the third line
And next line is the fifth line, because here is the fourth line</textarea>
<script type="text/javascript">createTextAreaWithLines('editContent');</script>
</form>
From: <i><a href=http://www.dhtmlgoodies.com/forum/viewtopic.php?t=506>Internet</a></i>
</center>
</body>
</html>