2

我有一个<pre>html 元素和一个附加到它的文本框。当我在文本框中书写时,文本出现在 pre 元素(如终端窗口)上,但我的问题是,当我输入的文本到达 pre 元素高度的末尾时,它们新出现的文本会从底部消失。你可以把它想象成一个没有导航的消息框,所以即将到来的新行离开了场景,我们只能看到旧行。我想知道如何计算每页的最大行数并从顶部删除第一个添加的行?你知道任何工作的例子吗?这就是 jsfiddle: http: //jsfiddle.net/LQg7W/2133/但我们输入的内容没有出现在 pre 元素中,因为我写了一些无法在 jsfiddle 中编写的 ajax 后服务器端

<div class="row">
  <div class="large-12 columns" style="background: #222; height: 70vh;">
  <pre id="terminalPre" width="2">
    <code id="terminal" style="color: #fff; padding: 1em;" ></code>
  </pre>
  <input type="text" id="textInput" name="" style="background: #222; position: absolute; bottom: 0; color: #fff;">
  </div>
</div>
4

1 回答 1

2

我建议你用 CSS 解决它。您可以添加一个div样式overflow:hidden,然后使用 jQuery 将其滚动到底部。

现场演示:http: //jsfiddle.net/s4FyM/1/

需要 jquery 来滚动 div:

$('.box').scrollTop($('.box')[0].scrollHeight);
于 2013-09-13T08:58:42.643 回答