Detect click outside textarea

Question

When the user enters text in my textarea, my window changes color. I want that when it clicks outside the textarea, it replaces color as before.

<textarea class="chat-input"
              id="textarea"
              rows="2" cols="50"
              (keyup)="detectTextarea($event)">
</textarea>


detectTextarea(event: any): any {
   this.changeColor = true;
   var textarea = document.getElementById("textarea");
}

/////////UPDATE//////////// It does not work :

detectTextarea(event: any): any {
  var textarea = document.getElementById("textarea");

  textarea.addEventListener("focus", function( event ) {
    this.changeColor = true;
  }, true);
  textarea.addEventListener("blur", function( event ) {
    this.changeColor = false;
  }, true);
}

Answer 1

Change it like this:

<textarea class="chat-input"
    id="textarea"
    rows="2" cols="50"
    (focus)="func()"
    (blur)="otherFunc()"
    (keyup)="detectTextarea($event)">
</textarea>

and then:

func() {
    this.changeColor = true;
  }
  otherFunc() {
    this.changeColor = false;
  }
}

Answer 2

您可以收听blur事件，以了解用户何时退出文本区域。