gpt4 book ai didi

javascript - 动态滚动文本区域到底部

转载 作者:行者123 更新时间:2023-11-28 08:31:31 24 4
gpt4 key购买 nike

我刚刚开始学习 javascript 和 ajax。我有一个文本区域,按下输入按钮后,它会向服务器发送一个请求,返回的内容应该显示在同一个文本区域中。虽然我已经设法与服务器建立连接,但我无法使文本区域在响应后向下滚动。这是我的 html 文件:

<!DOCTYPE html>
<html>
<script type="text/javascript" src="js/ajax.js"></script>
<body>
<textarea id="myDiv"></textarea>
<script type="text/javascript">

var terminal = document.getElementById("myDiv");
console.log(terminal);
getBrowserDimensions();

document.getElementById("myDiv").onkeydown = function(event){
var e = event || window.event;
if(e.keyCode == 13){
loadXMLDoc(terminal.value);
}
}
</script>
</body>
</html>

这是我的 JavaScript 文件:

function loadXMLDoc(sendString){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHHTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
terminal.value += xmlhttp.responseText+'\n';
}
}
xmlhttp.open("POST", "php/demo_get.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(sendString);
terminal.scrollTop = terminal.scrollHeight;
console.log("1: " + terminal.scrollTop);
console.log("2: " + terminal.scrollHeight);
}

function getBrowserDimensions(){
var x = window.innerWidth;
var y = window.innerHeight;
var terminalWidth = Math.floor(x * 0.95);
var terminalHeight = Math.floor(y * 0.95);
terminal.value += "width: " + x + " height: " + y + " tWidth : " + terminalWidth + '\n';
terminal.style.width = terminalWidth + "px";
terminal.style.height = terminalHeight + "px";
terminal.style.resize = "none";
}

我尝试了一些主要在该网站中找到的方法,例如:

terminal.scrollTop = terminal.scrollHeight - terminal.clientHeight;

但是什么都没有改变。文本区域将继续设置为其可滚动高度的中间。即使将scrollTop 设置为像9999 这样的固定数字也不会产生任何不同。我已经在 Firefox 和 Chrome 中尝试过了。我也不应该使用 jquery,所以如果对我做错了什么有任何想法或建议,将不胜感激。

最佳答案

ajax 调用是异步的,这意味着您要进行调用,在调用完成时创建一个事件处理程序,然后在实际发生之前设置scrollTop 值。试试这个...

function loadXMLDoc(sendString){
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHHTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
terminal.value += xmlhttp.responseText+'\n';
terminal.scrollTop = terminal.scrollHeight;
console.log("1: " + terminal.scrollTop);
console.log("2: " + terminal.scrollHeight);
}
}
xmlhttp.open("POST", "php/demo_get.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(sendString);
}

关于javascript - 动态滚动文本区域到底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21814060/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com