javascript - 在文本区域中动态加载文本，使用 Javascript 自动向下滚动？

Question

我有一个文本框设置为我正在制作的 JavaScript 游戏的结果输出。但是，我希望文本框在文本加载到文本框中时自动向下跳转。那可能吗？

HTML

<fieldset class="theResults" id="theResults">
<label>Your past guesses:</label> 
<textarea class="form-control input-lg" id="showResults" name="showResults" rows="1">
</textarea>
</fieldset>

JS

function userGuess() {
  var nGuess = document.getElementById("nGuess").value;
  var theResults = document.getElementById("showResults");

  if (nGuess == numToGuess) {
    theResults.value = theResults.value + "\r" + "Congratulations, that is right! You guessed " + nGuess + ".";
  } else if (nGuess > numToGuess) {
    theResults.value = theResults.value + "\r" + "Try something lower, that is too high! You guessed " + nGuess + ".";
  } else {
    theResults.value = theResults.value + "\r" + "Whoops, that is too low, try again! You guessed " + nGuess + ".";
  }
}

我尝试使用scrollTop，它覆盖了我为showResults使用的JS。

Answer 1

您需要首先将 rows 和 cols 赋予 TextArea，否则您只会看到 一个 > 文本行。

<textarea class="form-control input-lg" id="showResults" name="showResults" rows="5" cols="40">

然后您可以使用 theResults.scrollTop = theResults.scrollHeight; 设置底部文本

完整代码:

function userGuess() {
        var numToGuess = 55; //suppose number to guess is 55
        var nGuess = document.getElementById("nGuess").value;
        var theResults = document.getElementById("showResults");
        if (nGuess == numToGuess) {
            theResults.value = theResults.value + "\r" + "Congratulations, that is right! You guessed " + nGuess + ".";
        } else if (nGuess > numToGuess) {
            theResults.value = theResults.value + "\r" + "Try something lower, that is too high! You guessed " + nGuess + ".";
        } else {
            theResults.value = theResults.value + "\r" + "Whoops, that is too low, try again! You guessed " + nGuess + ".";
        }
        theResults.scrollTop = theResults.scrollHeight; //auto scroll for text
    }

<强> DEMO