关于textarea永远显示在底部的问题

大家好,小弟最近在写一个UBB文本编辑器,现在碰到个问题就是,比如我现在已经输入了很多内容了,滚动条在很下面,然后这个时候我点击一下比如 'B' 按钮,这时应该是在最后面加入一个  的标签,可是现在的问题就是,我点击后,滚动条就会自动还原到最上面去,我还得再拖下来继续输入.

我试了这么一段代码,在IE下可用,但是在火狐下没效果:

var txt = document.getElementById("txt"); 
txt.scrollTop=txt.scrollHeight;   

不知道谁能帮忙解决下?火狐下应该怎么样才能让滚动条永远停在最底部?

17 个解决方案

#1

可以尝试用绝对定位到txt.scrollHeight的地方
txt.style.position=absolute;
txt.style.top=txt.scrollHeight; 

#2

楼主的代码 我在FF3.5下看是正常的

#3

该回复于2010-08-06 10:47:48被版主删除

#4

晕..还是不行呀...仍然是IE下可用,FF下不可用?

先谢谢楼上各位了!!

我js很菜,是不是应该直接写在textarea的属性里?onload之类的?谁来指点下???

我现在就是直接写的

<script>
var txt = document.getElementById("txt"); 
txt.style.position=absolute;
txt.style.top=txt.scrollHeight; 
</script>

只能在IE下用.

如果写在textarea的onload里是不是就好了???该怎么写啊!谢谢啦!

#5

上面那么做是可以再任何浏览器中。
如果你说不可以，或许是编辑的B方式不一样
那么你可以尝试把他做成一个函数
在操作的时候调用

#6

尝试下
window.onload=function(){
   var txt = document.getElementById("txt"); 
   txt.style.position=absolute;
   txt.style.top=txt.scrollHeight; 
};

#7

谢谢了..可是仍然不行..真的崩溃了...

function addTag(tag){ 
//crappy browser sniffer 
var isFF = false; 
var textselected = false; 
var startTag,endTag,allTag;
var color,size,img,link;
if(navigator.userAgent.toLowerCase().indexOf("firefox") > 0){ 
isFF = true; 
} 
var myArea = document.getElementById("txt"); 
var begin,selection,end; 
if (isFF == true){ 
if (myArea.selectionStart!= undefined) {  
begin = myArea.value.substr(0, myArea.selectionStart);  
selection = (myArea.value).substr(myArea.selectionStart, myArea.selectionEnd - myArea.selectionStart);  
end = myArea.value.substr(myArea.selectionEnd); 
if (selection.length > 0){ 
textselected = true; 
} 
} 
}else{ 
if (window.getSelection){ 
selection = window.getSelection(); 
}else if (document.getSelection){ 
selection = document.getSelection(); 
}else if (document.selection){ 
selection = document.selection.createRange().text; 
} 
var startPos = myArea.value.indexOf(selection); 
if (startPos!= 0){ 
var endPos = myArea.value.indexOf(selection) + selection.length; 
begin = myArea.value.substr(0,startPos); 
end = myArea.value.substr(endPos, myArea.value.length); 
textselected = true; 
} 
} 

switch(tag)
{
case 'bold':
startTag='[bold]';
endTag='[/bold]';
break

case 'italic':
startTag='[italic]';
endTag='[/italic]';
break

case 'underline':
startTag='[underline]';
endTag='[/underline]';
break

case 'del':
startTag='[delete]';
endTag='[/delete]';
break

case 'color':
startTag='[color='+ color +']';
endTag='[/color]';
break

case 'size':
startTag='[size='+ size +']';
endTag='[/size]';
break

case 'left':
startTag='[align=left]';
endTag='[/align]';
break

case 'center':
startTag='[align=center]';
endTag='[/align]';
break

case 'right':
startTag='[align=right]';
endTag='[/align]';
break
}
allTag = startTag + endTag;

if(textselected == true){
myArea.value = begin+startTag+selection+endTag+end;
}else{

if (document.selection) {
myArea.focus();
sel = document.selection.createRange();
sel.text = allTag;
}
//MOZILLA/NETSCAPE support
else if (myArea.selectionStart || myArea.selectionStart == '0') {
var startPos = myArea.selectionStart;
var endPos = myArea.selectionEnd;
myArea.value = myArea.value.substring(0, startPos)
+ allTag
+ myArea.value.substring(endPos, myArea.value.length);
} else {
myArea.value += allTag;
}

} 
}

这是我加入UBB标签的函数

<a href="#" onclick="addTag('bold'); return false;">B</a> 这是加入B标签的按钮


<textarea name="content" id="txt" class="txt"></textarea>这是我的文本域..

到底怎么才能自动拉到底部呀?

#8

这里不是有： http://topic.csdn.net/u/20080606/14/7ad8fa41-ac74-48db-8495-fac0ae2d2f79.html

#9

谢谢楼上这个朋友`但是我的问题不是这个啊``我还是要滚动条的`只不过滚动条永远在底部而已`我不需要自适应高度``

基本上,我写的就是一个类似于CSDN这个回复内容用的UBB编辑器`

我就是想,当文本已经很长很长,在很下面了,我点一下这个让字体变粗的B,滚动条仍然还停止在最下面,而不是弹回最上面..

经过楼上的朋友们的帮助,现在在IE下已经没问题了,可是在火狐下,我在最后面想插入一个B的标签的话,一点击那个 B 按钮, 就会自动弹到最顶部,我得再拉下来继续输入,很麻烦!

#10

学习

#11

<a href="#" onclick="addTag('bold'); return false;">B </a> 
很明显是href的问题，直接改成
<a href="javascript:void(0)" onclick="addTag('bold'); return false;">B </a>
就可以了

#12

href="#"回去的不是你的“txt”的顶部，而是你的页面的顶部。所以你的滚动条滚动对这个无影响，应该是这样理解的

#13

引用 12 楼 aperson111 的回复:

href="#"回去的不是你的“txt”的顶部，而是你的页面的顶部。所以你的滚动条滚动对这个无影响，应该是这样理解的

这个B一般都是用图片做的吧，就算lz写文本似乎也不需要加超链接啊。。

#14

再次谢谢,可是,我就算换成11楼的代码,仍然不行,就算把<a>换成<button>也还是不行...

关键是,在IE下是好的,就是在FF下不行啊...唉...N天了还没弄好...

再次谢谢大家了..继续等...

#15

围观

#16

谢谢围观

#17

再顶一下吧``朋友们帮帮忙...如果能解决了我单独给分100..