需求:页面首部有个textarea，页面尾部也有个textarea。首部和尾部字段内容完全一样。当我在首部的textarea输入内容后，往下拉屏幕。尾部的textarea也自动显示相应内容。
1.不能在首尾分别写两个name不同textarea,因为提交表单时,name应当是唯一的,而且，如果写了两个textarea，必须保证一处更改，另一处也更改，比较麻烦。
2.所以只能有一个textarea，当往下拉屏幕，拉到最底部时，首部的textarea“滚动”到底部。
3.问题是：如何实现首尾联动（在首部更改，拖到底部时，textarea的值也更改，反之亦然），同时让用户感觉不到“滚动”的痕迹，让用户以为这就是两个不同textarea。
1.不能在首尾分别写两个name不同textarea,因为提交表单时,name应当是唯一的,而且，如果写了两个textarea，必须保证一处更改，另一处也更改，比较麻烦。
2.所以只能有一个textarea，当往下拉屏幕，拉到最底部时，首部的textarea“滚动”到底部。
3.问题是：如何实现首尾联动（在首部更改，拖到底部时，textarea的值也更改，反之亦然），同时让用户感觉不到“滚动”的痕迹，让用户以为这就是两个不同textarea。
textarea是可以输入的，如果在底下输入呢，上面也要变吗
你的第2条，name是可以相同，但这也不叫只有一个textarea啊，另一个不显示吗？
你第2条还说拉屏，第一个到底部？那底下那个跑哪去了？放一起？
当我在首部的textarea输入内容后，往下拉屏幕尾部的textarea也自动显示相应内容
不拉屏幕的时候呢，如果也变的话，话就给你说不太对劲，你把效果与功能想法分开，想实现啥功能，想要啥效果，别混在一起，感觉很乱，明朗的需求才是实现的前提
1.希望达到的效果：在页面首部textarea输入值后，尾部的textarea自动联动。反之亦然。
2.我的思路：在页面只有一个textarea,即首部的textarea。由于页面很长，两个textarea不会同时出现在页面上。当往下拉页面时，利用js方法把首部的textarea“拖”到底部。往上拉页面时，再把textarea“拖”首部。
3.为什么不在首尾各设置一个textarea,其中一个值改变时，利用dom赋值？原因一：有几十个页面都需要这种效果，其他的页面可能是几个button和input组成的复杂div。如果采用dom赋值的方法，有些麻烦。而采用js拖动，代码可复用，也方便。原因二：页面加载时，textarea需要初始化，如果只有一个textarea，struts默认就可以。如果两个textarea，需要改动几十处代码。
必须保证一处更改，另一处也更改，比较麻烦。
------
做2个表单就好了，一个页头，一个页尾，表单action一样，textarea就可以name一样了。
如果放到同一个表单，可以在表单提交的时候根据视窗的scrollTop设置其中一个textarea为disabled就不会提交这个textarea了。联动简单，任何一个textarea添加blur事件，设置另外一个textarea的值
<script type="text/javascript">
function setDisabled(f){
var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop);
f.content[top>200?0:1].disabled=true;
}
</script>
<form onsubmit="return setDisabled(this)">
<textarea cols="50" rows="1" name="content" onblur="this.form.content[1].value=this.value"></textarea>
<div style="height:1000px"><input type="submit" value="提交"/></div>
<textarea cols="50" rows="1" name="content" onblur="this.form.content[0].value=this.value"></textarea>
</form>
1.初始化的问题：当页面加载时，需要初始化textarea的值。有几十个页面需要这种效果，这样后台的初始化代码就要改很多。如果一个页面只有一个textarea,默认的初始化就可以
2.联动的问题：其他页面也需要首尾联动，可能是几个text加textarea首尾联动。用onblur联动，每一个输入域都需要监听。
考虑以上两点，我想能不能在页面中始终只有一个textarea,当页面拉到底部时，用js方法把首部的textarea“拖”过来。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<script type="text/javascript">function exchange(a,b,c){
var html=b.innerHTML;
b.innerHTML='';
b.style.display='none';
a.innerHTML=html;
document.getElementById('content').value=c;
a.style.display='block';
};function scroll(){
var top=document.getElementById("top");
var y1=top.offsetTop+top.offsetHeight;
var buttom=document.getElementById("buttom");
//获取顶离偏移量
var y= document.documentElement?(document.documentElement.scrollTop || 0):(document.body.scrollTop || 0);
y = Math.max(y, (window.scrollY || 0));
var v=document.getElementById('content').value;
if(y>y1){
if(buttom.style.display!='block'){
exchange(buttom,top,v);
}
}else{
if(top.style.display!='block'){
exchange(top,buttom,v);
}
}
}
window.attachEvent?window.attachEvent("onscroll",scroll):window.addEventListener("scroll",scroll,false);
</script><body>
<div id="top" style="display:block"><textarea cols="50" rows="10" id="content"></textarea></div>
<div style="height:1000px;width:100%;border:1px solid #bfbfbf"></div>
<div id="buttom" style="display:none;"></div>
</body>
</html>
window.onload=function(){
var dvForm=document.getElementById('dvForm')
window.onscroll=function(){
var top=Math.max(document.body.scrollTop,document.documentElement.scrollTop)
,scrollHeight=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
dvForm.style.top=(top>=dvForm.offsetHeight?scrollHeight-dvForm.offsetHeight:0)+'px';
}
}
</script>
<style type="text/css">
body,form{margin:0px;top:0px;}
#dvForm{position:absolute;left:0px;top:0px;background:#fff;}
.content{height:1000px;background:#eee;padding:50px 0px 50px 0px;display:block}
</style>
<div id="dvForm"><form onsubmit="return setDisabled(this)">
<textarea cols="50" rows="1" name="content"></textarea>
</form>
</div>
<div class="content">内容容器，注意要设置margin-top>=表单容器的高，页脚设置margin-bottom>=表单容器的高，防止内容重叠</div>