Typescript / Angular中textarea元素内的选项卡

Question

我在文本区域内的选项卡中找不到我的问题的解决方案。每次我使用点击按钮时，它都会跳转到另一个文本区域。现在我遇到了一个解决方案，但是，它是用 Javascript 编写的（我发现另一个是用 jQuery 编写的） - 但不幸的是我找不到 Typescript 的解决方案。

这是我现在得到的（用js写的）：

    document.getElementById('textbox').addEventListener('keydown', function (e) {
       if (e.key == 'Tab') {
         e.preventDefault();
         var start = this.selectionStart;
         var end = this.selectionEnd;
         this.value = this.value.substring(0, start) + '\t' + this.value.substring(end);
         this.selectionStart = this.selectionEnd = start + 1;
       }
    });

        <textarea pInputTextarea tabindex="0" (keydown)="handleKeydown($event)" onFocus="this.select();" (input)="setOkayButtonMode()"
            [rows]="10" [cols]="75" maxlength="255">
        </textarea>

我真的找不到任何东西，而 Stackoverflow 是我的问题的最后一个停靠点。也许你们中的一个可以帮助我:)

非常感谢前面！！

好极了 朱利安

Answer 1

Angular 提供了一个keydown 事件，可以在 HTML 元素上使用。将此添加到您的 <textarea> 元素并传递在 keydown 上触发的事件。

<textarea (keydown)="handleKeydown($event)"></textarea>

在组件的 TS 文件中，创建 handleKeydown 函数。这将接受 event 作为传入对象。 event.target 是对触发事件的元素的引用。在这种情况下，<textarea> 元素。

代码与 JS 大体相同，但不是使用this，而是使用event.target。

handleKeydown(event:any) {
    if (event.key == 'Tab') {
        event.preventDefault();
        var start = event.target.selectionStart;
        var end = event.target.selectionEnd;
        event.target.value = event.target.value.substring(0, start) + '\t' + event.target.value.substring(end);
        event.target.selectionStart = event.target.selectionEnd = start + 1;
    }
}