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>

我真的找不到任何东西，Whosebug 是解决我的问题的最后一站。也许你们中的一个可以帮助我 :)

在前万分感谢！！

格瑞兹朱利安

Answer 1

Angular 提供了可用于 HTML 元素的 keydown 事件。将此添加到您的 <textarea> 元素并传递在按下按键时触发的事件。

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

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

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

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;
    }
}

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

Tab inside textarea element in Typescript/Angular

javascript

tabs

textarea

typescript

angular