显示行号的文本输入框

关注+2004-11-07作者：蓝点
大多数文本编辑软件都有显示行号的功能，你是不是想让网页里的文本输入框也有这样的行号显示呢？那请你看一下Windy2000编写的这个效果吧：
<HTML><BR> <HEAD><BR> <TITLE>DirMap</TITLE><BR> <meta http-equiv='Content-Type' content='text/html; charset=gb2312'><BR> </HEAD><BR> <style><BR> * {<BR>  font-size: 12px<BR> }<BR> body {<BR>  margin: 10px; padding: 0px<BR> }<BR> A {<BR>  COLOR: black; TEXT-DECORATION: none;<BR> }<BR> A:hover {<BR>  COLOR: black; TEXT-DECORATION: none;<BR> }<BR> A:link {<BR>  TEXT-DECORATION: none<BR> }<BR> A:visited {<BR>  TEXT-DECORATION: none<BR> }<BR> table.list{<BR>  cursor: default;<BR>  border:1px solid #cccccc<BR>  background-color: #cccccc;<BR>  border-collapse: collapse;<BR>  border-Color: #cccccc;<BR> }<BR> </style><BR> <script><BR> function check_form() {<BR>  var the_form = document.forms[0];<BR>  if(!/^[\w\.]+$/.test(the_form.name.value)) {<BR> 　alert('Bad File Name !');<BR> 　the_form.name.focus();<BR> 　return false;<BR>  }<BR>  if(!/^[0-7]{3}$/.test(the_form.attrib.value)) {<BR> 　alert('Bad File Attrib !');<BR> 　the_form.attrib.focus();<BR> 　return false;<BR>  }<BR>  if(the_form.del.checked) {<BR> 　return confirm('Are you sure to delete the file ?');<BR>  }<BR>  return true;<BR> }<BR> <BR> function show_ln(){<BR>  var txt_ln　= document.getElementById('txt_ln');<BR>  var txt_main　= document.getElementById('txt_main');<BR>  txt_ln.scrollTop = txt_main.scrollTop;<BR>  while(txt_ln.scrollTop != txt_main.scrollTop) {<BR> 　txt_ln.value += (i++) + '\n';<BR> 　txt_ln.scrollTop = txt_main.scrollTop;<BR>  }<BR>  return;<BR> }<BR> <BR> function editTab(){<BR>  var code, sel, tmp, r<BR>  var tabs=''<BR>  event.returnValue = false<BR>  sel =event.srcElement.document.selection.createRange()<BR>  r = event.srcElement.createTextRange()<BR> <BR>  switch (event.keyCode){<BR> 　case (8) :<BR> 　 if (!(sel.getClientRects().length > 1)){<BR> 　　event.returnValue = true<BR> 　　return<BR> 　 }<BR> 　 code = sel.text<BR> 　 tmp = sel.duplicate()<BR> 　 tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)<BR> 　 sel.setEndPoint('startToStart', tmp)<BR> 　 sel.text = sel.text.replace(/^\t/gm, '')<BR> 　 code = code.replace(/^\t/gm, '').replace(/\r\n/g, '\r')<BR> 　 r.findText(code)<BR> 　 r.select()<BR> 　 break<BR> 　case (9) :<BR> 　 if (sel.getClientRects().length > 1){<BR> 　　code = sel.text<BR> 　　tmp = sel.duplicate()<BR> 　　tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)<BR> 　　sel.setEndPoint('startToStart', tmp)<BR> 　　sel.text = '\t'+sel.text.replace(/\r\n/g, '\r\t')<BR> 　　code = code.replace(/\r\n/g, '\r\t')<BR> 　　r.findText(code)<BR> 　　r.select()<BR> 　 }else{<BR> 　　sel.text = '\t'<BR> 　　sel.select()<BR> 　 }<BR> 　 break<BR> 　case (13) :<BR> 　 tmp = sel.duplicate()<BR> 　 tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top)<BR> 　 tmp.setEndPoint('endToEnd', sel)<BR> <BR> 　 for (var i=0; tmp.text.match(/^[\t]+/g) && i<tmp.text.match(/^[\t]+/g)[0].length; i++) tabs += '\t'<BR> 　 sel.text = '\r\n'+tabs<BR> 　 sel.select()<BR> 　 break<BR> 　default　:<BR> 　 event.returnValue = true<BR> 　 break<BR>  }<BR> }<BR> </script><BR> <BODY><BR> <div style='font-weight:bold; font-size: 18px'>File: ../fso/upload_manager.class.php</div><br><BR> <table width='700' class='list' border='1' bgcolor='#eeeeee' bordercolorlight='#000000' bordercolordark='#FFFFFF' cellpadding='0' cellspacing='0'><BR> 　<tr bgcolor='#cccccc'> <BR> 　　<td colspan='2' height='20'> <BR> 　　　<div align='center'><b>File Information</b> </div><BR> 　　</td><BR> 　</tr><BR> 　<tr> <BR> 　　<td colspan='2'> <br /><BR> 　　　<form name='edit' method='post' action='fso_edit.php' onsubmit='return check_form()'><BR> 　　　　<table width='90%' border='0' align='center' ><BR> 　　　　　<tr> <BR> 　　　　　　<td>Name ：</td><BR> 　　　　　　<td><input type='text' name='name' value='upload_manager.class.php'></td><BR> 　　　　　</tr><BR> 　　　　　<tr> <BR> 　　　　　　<td valign='top'>Time ：</td><BR> 　　　　　　<td>2003-10-02 00:55:59</td><BR> 　　　　　</tr><BR> 　　　　　<tr> <BR> 　　　　　　<td>Attrib ：</td><BR> 　　　　　　<td><input type='text' name='attrib' value='666'> (rw-rw-rw-)</td><BR> 　　　　　</tr><BR> 　　　　　<tr> <BR> 　　　　　　<td>MoveTo ：</td><BR> 　　　　　　<td><BR> 　　　　　　　<select name='move'><BR> 　　　　　　　　<option value=''>NoMove</option><BR> 　　　　　　　　<option value='../fso/../'>Parent Direction</option><BR> <BR> 　　　　　　　</select><BR> 　　　　　　</td><BR> 　　　　　</tr><BR> 　　　　　 <tr> <BR> 　　　　　　 <td>Size ：</td><BR> 　　　　　　 <td>6.2 KB</td><BR> 　　　　　 </tr><BR> 　　　　　 <tr> <BR> 　　　　　　 <td valign='top'>Content ：</td><BR> 　　　　　　 <td><BR> 　　　　　　　 <textarea id='txt_ln' name='content' rows='10' cols='4' style='overflow:hidden;height:200px;border-right:0px;text-align:right' readonly>
　　　　　　　　
　　　　　　　　
　　　　　　　　  
　　　　　　　　  
　　　　　　　　删除
　　　　　　　
　　　　　　
　　　　　
　　　　
　　　
　　
　

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]