动态滚动textarea到bottomome

我刚开始学习javascript和ajax。我有一个textarea，它按下enter按钮，它发送一个请求到服务器，返回的东西应该显示在同一个textarea中。尽管我已经设法与服务器建立连接，但我无法让textarea在响应后向下滚动。这是我的html文件：动态滚动textarea到bottomome

<!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;

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

来源

2014-02-16 Klimid1689

这应该只是'scrollTop的= scrollHeight' – Archer

的【如何有一个textarea保持滚动到更新时，底部]可能重复（http://stackoverflow.com/questions/7373081/how-to-have-a-textarea-keep-scroll-to-the-bottom-when-updated） – Archer

你是什么意思“它应该只是scrollTop = scrollHeight”？这些方法不是一个对象吗？我看到了可能的重复，仍然不会提供任何有效的解决方案。 – Klimid1689

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); 
}

来源

2014-02-16 17:08:24 Archer

好的！那甚至不会跨越我的想法。为我学习更多学习。非常感谢你，完美地工作。 :) – Klimid1689

没问题 - 我很乐意提供帮助。祝你好运：） – Archer

动态滚动textarea到bottomome

回答

相关问题