javascript - 在 javascript/jQuery 中的文本区域中显示新打印的文本

Question

我正在开展一个元素，其中 Web 应用程序正在将信息打印到充当控制台的 textarea。

为了简单起见，声明如下:

<textarea id = "console" readonly></textarea>

我有一个函数，当 Web 应用程序调用它时，它会将新文本打印到此窗口:

function printToConsole(text) {
    $('#console').val($('#console').val() + text);
    // INSERT NEW CODE HERE
}

目前这个函数可以很好地打印到控制台，但我每次都必须向下滚动才能看到返回的新信息。必须有一些使用焦点等的方法让它自动滚动到底部。

Answer 1

您可以使用 scrollTop() 方法，如下所示。

function printToConsole(text) {
    var newVal = $('#console').val() + text;
    $('#console').focus().val('').val(newVal); //to focus at the end of text
    $('#console').scrollTop($('#console')[0].scrollHeight);
}

var i=0;
$('button').click(function(){
    printToConsole('Add text '+(++i)+'\n');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id = "console" style="height: 70px;" readonly></textarea>
<button>Click</button>