逐步在html文本框中记录事件。

Question

我想要创建一个带有文本区域(或文本编辑器)的网页，我希望在这个框中显示一些日志消息，这些日志消息是逐步添加的。考虑一下，当我们安装一个应用程序时，它会以增量的方式显示日志。

我已经有了一个显示数据的编辑器(ace编辑器)，但是我有一些问题：

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>

​