動態滾動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

回答

相關問題