Question

我不确定这是否可以通过jQuery实现，但我正在开发一个使用form的网络终端能够发送并获取消息（显示它们）在浏览器中）来自ssh服务器。然后，当我从命令执行中输出（从ssh服务器发送到nodeJS服务器然后发送到我的浏览器）时，文本将被添加到使用pre标记设置的文本框中。

<body style="margin:100">
  <div id="terminal-1" class="tab-pane active">
    <pre id="output" style="height:300px; overflow: auto;"></pre>
     ^--- This one 
    <div class="row-fluid"> 
      <div class="span6">
        <form id="myForm" class="form-inline" onsubmit="return false;">
          <input type="text" class="input-large" style="width:70%" name="command" placeholder="Enter Command" autocomplete="off">
          <button id="execute" class="btn">Go!</button>
        </form>
      </div>
    </div>
  </div>
  <! some code continues...-->

然后所有命令输出都插入到pre标签中，这使得盒子超载（不知道这是否是正确的术语）并开始放下文本，在右边创建一个栏一边，看图片（标有红色）：

enter image description here

所以最后一个问题是，我应该添加哪个jQuery代码，以便在添加文本时该栏自动向下滚动？

由于

Answer 1

您可以使用jQuery滚动<pre>，

jQuery( function(){
   var pre = jQuery("#output");
    pre.scrollTop( pre.prop("scrollHeight") );
});

这里是jsFiddle

Answer 2

你可以将你的输出包装成几个div，外面的一个有一个固定的高度和overflow-x：滚动第二个div将保存你的响应。当你获得数据时，你将数据附加到内部数据然后你得到高度，然后你可以使用外部的scrollTop与内部的高度。

这是一个例子

HTML

<div style="height: 100px; overflow-x:scroll;" id="console">
  <div id="console-content">
  </div>
</div>
<form id="form">
  <input type="text" id="text">  
</form>

的javascript

$(function(){
  var $form = $('#form'),
    $console = $('#console');
    $content = $('#console-content'),
    $text = $('#text');
  $('form').submit(function(event){
    var height;
    $content.append('<pre>' + $text.val() + '</pre>');
    height = $content.height();
    $console.scrollTop(height);
    $text.val('');
    event.preventDefault();
  })  
});

你可以看到这里的实例

http://plnkr.co/edit/A1Okwk1r6zZW4XXdehWq?p=preview

将文本添加到预标记时，请保持滚动条向下

2 个答案: