Динамически прокручивать текстовое поле до нижнего

Я только начинаю изучать 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, поэтому, если какие-либо идеи о том, что я делаю неправильно, или предложения были бы очень признательны.


javascript textarea scrolltop
person Klimid1689    schedule 16.02.2014    source источник
comment
Это должно быть просто scrollTop = scrollHeight   -  person Reinstate Monica Cellio    schedule 16.02.2014
comment
возможный дубликат Как иметь текстовое поле, которое будет прокручиваться вниз при обновлении   -  person Reinstate Monica Cellio    schedule 16.02.2014
comment
что вы имеете в виду? Это должно быть просто scrollTop = scrollHeight? разве это не методы объекта? Я видел возможный дубликат и до сих пор не могу предложить никакого работающего решения.   -  person Klimid1689    schedule 16.02.2014
comment
Это свойства, а не методы (без скобок), и это должно быть просто terminal.scrollTop = terminal.scrollHeight;. Если это не работает, проблема связана с чем-то другим.   -  person Reinstate Monica Cellio    schedule 16.02.2014
comment
это весь загруженный код javascript :(   -  person Klimid1689    schedule 16.02.2014
comment
Я должен был заметить проблему раньше. Ответ ниже должен помочь :)   -  person Reinstate Monica Cellio    schedule 16.02.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вызов 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);
}
person Reinstate Monica Cellio    schedule 16.02.2014
comment
Ok! это даже не приходило мне в голову. больше учиться учиться учиться для меня. спасибо большое, отлично поработал. :) - person Klimid1689; 16.02.2014
comment
Нет проблем - рад помочь. Удачи :) - person Reinstate Monica Cellio; 17.02.2014