Tab inside textarea element in Typescript/Angular

Question

i cannot find a solution of my issue with the tab inside a textarea. Everytime i use tap button it jumps to another textarea. Now I have come across a solution, which is, however, written in Javascript (Another one i found is written with jQuery) - but unfortunately I can't find a solution for Typescript.

This is what i got for now (written in 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>

I really can't find anything and Stackoverflow is the last port of call for my problem. Maybe one of you can help me :)

Big thanks in the front!!

greez Julian

Does this answer your question? [Use tab to indent in textarea](https://stackoverflow.com/questions/6637341/use-tab-to-indent-in-textarea) — Harun Yilmaz, Jun 21 '21 at 13:37
Hey Harun, this is where i got the code snippet from. But unfortunately it doesn't answer my question :( — julixw, Jun 21 '21 at 13:47
Angular uses something called [@HostListener](https://angular.io/api/core/HostListener) in place of `addEventListener`. It's often considered "best practice" to avoid accessing DOM elements in TS, where possible. Is this what you mean you are looking for? — daddygames, Jun 21 '21 at 13:52
@daddygames Thanks for your answer - can u give me some example for the HostListener? And is there any module to add? — julixw, Jun 21 '21 at 17:04
I thought of a simpler way of doing this without HostListener. I hope my answer is helpful. — daddygames, Jun 21 '21 at 17:35

daddygames · Accepted Answer · 2021-06-21T17:37:37.373

1

Angular provides a keydown event that can be used on HTML elements. Add this to your <textarea> element and pass the event that gets fired on keydown.

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

In the Component's TS file, create the handleKeydown function. This will accept the event as the incoming object. event.target is a reference to the element that fired the event. In this case, the <textarea> element.

The code is mostly the same as the JS, but instead of using this, the code uses event.target in it's place.

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

edited Jun 21 '21 at 17:37

answered Jun 21 '21 at 17:34

daddygames

1,880
1
11
18

Great! Thank you very much. It works :-) have a nice rest day. – julixw Jun 21 '21 at 17:36
sorry for asking again. The handleKeydown function works pretty well! The tab is finally inside the textarea, but it always jumps to the next button underneath. Do you know any solution for that? :-) – julixw Jun 21 '21 at 17:58
Interesting. I've played around with this trying to recreate your issue and have not seen it. You may need to update your question with relevant HTML code to help identify the cause of the issue. – daddygames Jun 21 '21 at 18:13
I've added the HTML Code into my issue description above. It is in a div tag and a tag which is from my company - cant show you more of the code, but i hope it gives u clearer look! – julixw Jun 21 '21 at 19:33
What is happening in `setOkayButtonMode()`? – daddygames Jun 21 '21 at 20:26
Hey name: @daddygames the setOkayButtonMode()'s job is that the OK button can be pressed in the dialog if there is something written in the textarea. I try to delete it. I tried to delete it as a test, but then the OK button can no longer be selected. I tried the handleKeydown in an seperate project, it works. But in the Company project it wont.. – julixw Jun 22 '21 at 05:54
1

event.stopPropagation(); that was missing. It works fine now!! Thanks for your help man :-) – julixw Jun 22 '21 at 12:50

Tab inside textarea element in Typescript/Angular

1 Answers1