文本框中显示行号[兼容IE/FF浏览器}

发布时间：2018-09-06 10:46 所属栏目：30 来源：站长网

导读：烈火网(LieHuo.Net)教程原理是：当文本框内按键按下后，实时检测文本框内的回车\n,然后显示行号到左侧浮动一个层。ie下使用onscroll 实现文本框与浮动层同步滚动。FF下定时器实时控制文本框scrollTop和浮动层scrollTop相等。代码是工作中的代码中摘出来的

　　烈火网(LieHuo.Net)教程原理是：当文本框内按键按下后，实时检测文本框内的回车“\n”,然后显示行号到左侧浮动一个层。ie下使用onscroll 实现文本框与浮动层同步滚动。FF下定时器实时控制文本框scrollTop和浮动层scrollTop相等。代码是工作中的代码中摘出来的，有些冗余，主要是看实现方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>在文本框中显示行号，兼容浏览器ie、ff</title> <link href="style/public.css" rel="stylesheet" type="text/css"> <style type="text/css"> .b1{height:20px;border:1px solid #7f9db9;line-height:20px; padding:0} input.btn{height:auto; font-size:14px; font-weight:bold; color:#000} #main {color:#666} textarea{border:1px solid #7f9db9; font-size:14px; width:448px; color:#000} input{font-size:14px; color:#000} #main h3{color:#000} .grey{color:#999} em{font-style:normal; color:#FF0000; font-size:12px;} #msg1,#msg2,#msg3,#msg4{ display:none} #ol{position:absolute; z-index:1; padding:0px; margin:0px; border:0px; background:#ecf0f5;width:23px; text-align:left; } #li{background:#ecf0f5; height:160px; overflow:hidden; width:23px; border-right:0; line-height:20px; margin:0px; padding:0px; padding-left:2px; text-align:center} #c2{font-family:Arial, Helvetica, sans-serif; height:160px; margin:0px; width:420px; padding:0 0 0 28px; overflow-x: hidden; line-height:20px;} </style> </head> <body onLoad="keyUp();"> <h3><em>*</em>烈火网栏目：</h3> <div> <table width="900" border="0" cellspacing="0" cellpadding="0" style="position:relative"> <tr> <td width="55%"> <div id="ol"><textarea cols="2" rows="10" id="li" disabled></textarea></div> <textarea name="co" cols="60" rows="10" wrap="off" id="c2" onblur="check('2')" onkeyup="keyUp()" onFocus="clearValue('2')" onscroll="G('li').scrollTop = this.scrollTop;" oncontextmenu="return false" class="grey">新闻资讯网站运营与推广网站管理员工具网页特效网址：www.veryhuo.com</textarea> </td> <td width="45%" valign="top"><p>在文本框中显示行号，兼容浏览器ie、ff</p> <p>输入内容回车换行，会显示行号。支持粘贴。js代码是从工作中的代码摘出来的，可能有些冗余。</p> </td> </tr> </table> </div> <em class="block" id="msg2">不能为空。</em> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' title="liehuo.net" target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）