当前位置：首页 -> 网页设计 -> HTML/CSS -> 显示行号的文本输入框

显示行号的文本输入框

时间： 2021-07-31 作者：daque

大普遍文本编纂软硬件都有表露行号的功效，你是否想让网页里的文本输出框也有如许的行号表露呢？那请你看一下windy2000编写的这个功效吧：<html><head><title>dirmap</title><meta http-equiv='content-type' content='text/html; charset=utf8'></head><style>* { font-size: 12px}body { margin: 10px; padding: 0px}a { color: black; text-decoration: none;}a:hover { color: black; text-decoration: none;}a:link { text-decoration: none}a:visited { text-decoration: none}table.list{ cursor: default; border:1px solid #cccccc background-color: #cccccc; border-collapse: collapse; border-color: #cccccc;}</style><script>function check_form() { var the_form = document.forms[0]; if(!/^[\w\.]+$/.test(the_form.name.value)) { alert('bad file name !'); the_form.name.focus(); return false; } if(!/^[0-7]{3}$/.test(the_form.attrib.value)) { alert('bad file attrib !'); the_form.attrib.focus(); return false; } if(the_form.del.checked) { return confirm('are you sure to delete the file ?'); } return true;}function show_ln(){ var txt_ln = document.getelementbyid('txt_ln'); var txt_main = document.getelementbyid('txt_main'); txt_ln.scrolltop = txt_main.scrolltop; while(txt_ln.scrolltop != txt_main.scrolltop) { txt_ln.value += (i++) + '\n'; txt_ln.scrolltop = txt_main.scrolltop; } return;}function edittab(){ var code, sel, tmp, r var tabs='' event.returnvalue = false sel =event.srcelement.document.selection.createrange() r = event.srcelement.createtextrange() switch (event.keycode){ case (8) : if (!(sel.getclientrects().length > 1)){ event.returnvalue = true return } code = sel.text tmp = sel.duplicate() tmp.movetopoint(r.getboundingclientrect().left, sel.getclientrects()[0].top) sel.setendpoint('starttostart', tmp) sel.text = sel.text.replace(/^\t/gm, '') code = code.replace(/^\t/gm, '').replace(/\r\n/g, '\r') r.findtext(code) r.select() break case (9) : if (sel.getclientrects().length > 1){ code = sel.text tmp = sel.duplicate() tmp.movetopoint(r.getboundingclientrect().left, sel.getclientrects()[0].top) sel.setendpoint('starttostart', tmp) sel.text = '\t'+sel.text.replace(/\r\n/g, '\r\t') code = code.replace(/\r\n/g, '\r\t') r.findtext(code) r.select() }else{ sel.text = '\t' sel.select() } break case (13) : tmp = sel.duplicate() tmp.movetopoint(r.getboundingclientrect().left, sel.getclientrects()[0].top) tmp.setendpoint('endtoend', sel) for (var i=0; tmp.text.match(/^[\t]+/g) && i<tmp.text.match(/^[\t]+/g)[0].length; i++) tabs += '\t' sel.text = '\r\n'+tabs sel.select() break default : event.returnvalue = true break }}</script><body><div style='font-weight:bold; font-size: 18px'>file: ../fso/upload_manager.class.php</div><br><table width='700' class='list' border='1' bgcolor='#eeeeee' bordercolorlight='#000000' bordercolordark='#ffffff' cellpadding='0' cellspacing='0'> <tr bgcolor='#cccccc'> <td colspan='2' height='20'> <div align='center'><b>file information</b> </div> </td> </tr> <tr> <td colspan='2'> <br /> <form name='edit' method='post' action='fso_edit.php' onsubmit='return check_form()'> <table width='90%' border='0' align='center' > <tr> <td>name ：</td> <td><input type='text' name='name' value='upload_manager.class.php'></td> </tr> <tr> <td valign='top'>time ：</td> <td>2003-10-02 00:55:59</td> </tr> <tr> <td>attrib ：</td> <td><input type='text' name='attrib' value='666'> (rw-rw-rw-)</td> </tr> <tr> <td>moveto ：</td> <td> <select name='move'> <option value=''>nomove</option> <option value='../fso/../'>parent direction</option> </select> </td> </tr> <tr> <td>size ：</td> <td>6.2 kb</td> </tr> <tr> <td valign='top'>content ：</td> <td> <textarea id='txt_ln' name='content' rows='10' cols='4' style='overflow:hidden;height:200px;border-right:0px;text-align:right' readonly></textarea><textarea id='txt_main' name='content' rows='10' cols='70 'onkeydown='edittab()' onchange="document.forms[0].modi.value='ture'" onscroll='show_ln()' wrap='off' style='overflow:auto;height:200px;padding-left:5px;border-left:0px'>/********************************************* ** name : upload manager ** author : windy_sk ** time : 2003-05-10 ** email : flyhorses@sina.com ** homepage: none (maybe soon) ** notice : u can use & modify it freely, ** but please hold this item. ** *********************************************/class upload_manager { var $upload_path = ""; var $upload_counter = 0; var $upload_result = array(); var $upload_rename = false;function upload_manager($upload_path = 'upload/', $upload_rename = false, $relative = false) {}}</textarea> <script>for(var i=1; i<=20; i++) document.getelementbyid('txt_ln').value += i + '\n';</script> <input type='hidden' name='modi' value=''> </td> </tr> <tr> <td colspan='2'> <div align='center'><br> <input type='hidden' name='name_org' value='upload_manager.class.php'> <input type='hidden' name='path' value='../fso'> <input type='submit' value=' 确定 ' name='submit'> <input type='reset' value=' 重置 ' name='reset'> <input type='checkbox' value='true' name='del'> 删除 </div> </td> </tr> </table> </form> </td> </tr></table></body></html> [ctrl+a 十足采用提醒：你可先窜改局部代码，再按运转]（根源：蓝色理念）

显示行号的文本输入框

相关推荐

推荐下载

热门阅览

最新排行