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

Dynamically Loaded Text in a Textarea, Scroll Down Automatically Using Javascript?

本文关键字：文本 滚动 Javascript 区域 动态 加载 使用      更新时间：2023-09-26

我有一个文本框，作为我正在制作的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。

您需要先将rows和cols赋给TextArea，否则您将只看到one行文本。

<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

相关文章：