イベントをHTMLテキストボックスに徐々に記録します

Question

テキストエリア（またはテキストエディタ）を使用してWebページを作成したい場合、ログメッセージが徐々に追加されるボックスにいくつかのログメッセージを表示します。アプリケーションをインストールするときに、何が増分しているのかに関するログが表示されることを考慮してください。

私はすでにデータを示しているが、私はいくつかの問題を抱えてエディタ（エースエディタ）でページを持っている：

1. データは編集内容に追加されると、すべてのボックスが更新されます。
2. リフレッシュに加えて、カーソルは最後に配置するのではなく、ボックスの先頭に表示されます。

ウェブページでイベントを記録するための書き込みコンポーネントを見つけるのを手伝ってください。ありがとうございました。

のHTML側のコード：

<button 
     data-toggle="modal" href="#edit_file_content_modal" 
     ng-click="process(migrateResult)" 
     class="btn btn-icon-only red" 
     uib-popover="Log"> 

     <i class="fa fa-newspaper-o"></i> 
</button> 

<div class="modal fade" id="edit_file_content_modal" tabindex="-1" role="dialog" aria-labelledby="edit_file_content_modal"> 
<div class="modal-dialog modal-lg" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span 
        aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title" id="edit_file_content_modal-title">File Content</h4> 
     </div> 
     <div class="modal-body"> 

      <div> 
       <code-editor 
         code-model="content" 
         header-title="header"> 
       </code-editor> 
      </div> 



      <div> 
       <div class="modal-footer"> 
        <button type="button" ng-click="saveFile()" class="btn btn-default" ng-disabled=false> 
         Save 
        </button> 
        <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="cancelCallback()"> 
         Cancel 
        </button> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

とJSファイルで、私はイベントをリッスンし、編集内容に受信したデータを追加し、変更適用されます。

io.socket.on(obj.migrateSourceOwner.sourceFile, function (data) { 
    $scope.content += ("\n" + data); 
    $scope.$apply(); 
}); 

Answer 1

を

ここには、それが役に立つかもしれないことを望むテキストエリアを更新するためのプレーンjsサンプルです

var txt = document.getElementById('log'); 
 

 
setInterval(function(){ 
 
txt.value += '\ntest'; 
 
},2000);

<textarea id='log' rows=50 cols=60 autofocus> 
 

 

 
</textarea>