显示行号的文本输入框
添加时间: 2005-6-9 5:05:41 作者: 网络收集 阅读次数:99 来源: http://d9soft.com
大多数文本编辑软件都有显示行号的功能，你是不是想让网页里的文本输入框也有这样的行号显示呢？那请你看一下Windy2000编写的这个效果吧：
<HTML>
<HEAD>
<TITLE>DirMap</TITLE>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
</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' 显示行号的文本输入框(1)
第 [1] [2] [3] 下一页
上一篇文章: 标记语言处理模型（演示版） 下一篇文章: 一个格式化数值的函数
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>