Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

Question

Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

I need a solution where an input field's height adjusts to display the user's entry, then returns to normal size when they click away. It should function similar to this example image: https://i.stack.imgur.com/yKcik.png

Once the user enters their request (like the second request entry), the input field will expand, and when they click out of the box, it will shrink back to its original size (like the first request entry). This behavior is similar to how the "POSTMAN" app handles entering header or query parameters.

html css angular less

Answer 1

Answer №1

Referencing the solution found in this particular response on Stack Overflow

A method involves defining a variable 'height' and a function that handles the textarea element:

height = "1.125rem";

adjustHeight(textArea) {
    this.height = null;
    setTimeout(() => {
      this.height = textArea.scrollHeight + "px";
    });
  }

The process of achieving an auto-sizing effect requires setting height to null initially, then updating it to scrollHeight within a setTimeout function for better control.

To manage the height adjustments, you can utilize (focus), (blur), and (input) events:

<textarea #textArea  [style.height]="height" 
                       (input)="adjustHeight(textArea)" 
                       (focus)="height=textArea.scrollHeight+'px'" 
                       (blur)="height='1.125rem'"></textarea>

For a demonstration, view a simple example on StackBlitz

Answer 2

Referencing the solution found in this particular response on Stack Overflow

A method involves defining a variable 'height' and a function that handles the textarea element:

height = "1.125rem";

adjustHeight(textArea) {
    this.height = null;
    setTimeout(() => {
      this.height = textArea.scrollHeight + "px";
    });
  }

The process of achieving an auto-sizing effect requires setting height to null initially, then updating it to scrollHeight within a setTimeout function for better control.

To manage the height adjustments, you can utilize (focus), (blur), and (input) events:

<textarea #textArea  [style.height]="height" 
                       (input)="adjustHeight(textArea)" 
                       (focus)="height=textArea.scrollHeight+'px'" 
                       (blur)="height='1.125rem'"></textarea>

For a demonstration, view a simple example on StackBlitz

Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

Answer №1

Similar questions

ThymeLeaf does not support the parsing of JavaScript code

Building an easy-to-use jQuery task list

What is the best way to display a collection of square Views in a FlatList in a react native application?

The CSS file is not displaying the background image on the PHP file

Guide to implement editable columns in Angular 4 with a click functionality

Is the PHP variable receiving a null value by the conclusion of the script?

Strange behavior in Angular's http response

Utilizing ElementRef in Angular 4 to close dropdown when clicking outside of it

Understanding Aspect Ratios in CSS for Div Containers and their Components

Ensure that the fixed header's width matches the size of the container div

Steps for preventing text manipulation in ng2-ace-editorWould you like to restrict users from copying, pasting

What sets property binding with methods in Angular apart from using @Output() and EventEmitter?

Guide on how to use JavaScript to make an HTML5 input field mandatory

I am wondering how to use the value assigned to a variable's textContent as an argument for player input in my JavaScript code

The animation did not cause a transition to occur

What is the best way to prioritize items on a list in JavaScript?

Obtain the identifier of a div within nested HTML components by utilizing jQuery

Tips for entering the lowest and highest values into the input field

Every time I attempt to create a detail page for a table, I am consistently greeted with an error message

How can I design a custom status update box inspired by the look and feel of Facebook