要写两个带行号的textarea,求教如何实现滚动条的同步滚动...

daols 2009-05-30 01:17:27

我在做简单的网页文本编辑器...两个带行号的textarea,并排排列,,如何实现滚动条的同步滚动?...
目的是拖动$('sign')的时候$('txt')跟着滚动相同高度...拖动$('txt')的时候$('sign')也跟着滚动相同高度....
要求代码兼容 opera9x & firefox2 ,,无视IE....

<script language="javascript">

function $(id){return document.getElementById(id);}

/*sign rows*/

function signRow(){

if ($('txt').value != ''){

var x=$('txt').value.split('\n'); var y='';

for (var i=0;i<x.length;i++){y=y+(i+1)+'\n';}

$('sign').value=y.replace(/\n$/,'');void(0);}

}

</script>

<textarea id="sign" name="sign" cols="4" rows="14" wrap="off" readonly="1" onDblClick="signRow();" onscroll="$('txt').scroll(0,this.scrollHeight)" style="background:#d0d0d0;"></textarea>

<textarea id="txt" name="txt" cols="81" rows="14" wrap="off" onscroll="$('sign').scroll(0,this.scrollHeight)"></textarea>

...全文

233 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

daols 2009-05-30

打赏
举报

为了提高代码效率节省资源又改进了一下...

<textarea id="sign" name="sign" cols="4" rows="14" wrap="off" readonly="1" onDblClick="signRow();" onmouseup="$('txt').scrollTop=$('sign').scrollTop;" style="background:#d0d0d0;text-align:right;"></textarea>

<textarea id="txt" name="txt" cols="81" rows="14" wrap="off" onmouseup="$('sign').scrollTop=$('txt').scrollTop;"></textarea>

daols 2009-05-30

打赏
举报

<textarea id="sign" name="sign" cols="4" rows="14" wrap="off" readonly="1" onDblClick="signRow();" onmousemove="$('txt').scrollTop=$('sign').scrollTop;" onmouseup="$('txt').scrollTop=$('sign').scrollTop;" style="background:#d0d0d0;"></textarea>
<textarea id="txt" name="txt" cols="81" rows="14" wrap="off" onmousemove="$('sign').scrollTop=$('txt').scrollTop;" onmouseup="$('sign').scrollTop=$('txt').scrollTop;"></textarea><br>

做出来了.....原来是scrollTop属性...而不是scrollHeight...

daols 2009-05-30

打赏
举报

楼上大哥...你这个在ff上也没法实现两个textarea的同步滚动阿....你是ff2么??
其实我主要是要兼容op9x...我一般只用op...不用ie和ff...
还有就是不需要onkeyup...那样编辑文本的时候一直在计算,,效率太低了...只在需要行号的时候onDblClick就行了...

tantaiyizu 2009-05-30

打赏
举报

简单的写了下，只测试了ff和ie，应该是可以的吧

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title> New Document </title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />



</head>

<body>

<script language="javascript">



function $(id){return document.getElementById(id);}



function transfer()

{

	var s = $("sign");

	var t = $("txt");



	var tValue = t.value.split("\n");

	var sValue = [];



	for (var i=1;i<tValue.length+1 ;i++ )

	{

		sValue.push(i +".\n");

	}



	s.value = sValue.join("").toString();

}

function scroll(current ,other)

{

	$("oom").innerHTML = current.scrollTop;

	$(other).scrollTop = current.scrollTop;

}

</script>

<p>

	<span id="oom">0</span>

</p>

<p>

	<textarea id="sign" name="sign" cols="4" rows="14" wrap="off" readonly="1" style="background:#d0d0d0;" onscroll="scroll(this ,'txt')"></textarea>

	<textarea id="txt" name="txt" cols="81" rows="14" wrap="off" onkeyup="transfer()" onscroll="scroll(this ,'sign')"></textarea>

</p>

</body>

</html>