How to use method In Javascript
To change the height, a new function is created which changes the style property of the “textarea”. The height of the text area is first set to auto. This value makes the browser set the height of an element automatically. This will make the text scrollable as the “textarea” height is less than the text. Immediately on the next line, the height is again set equal to that of the scrollHeight.
The scrollHeight property is used to return the entire height of an element including padding in pixels. This will make the text area height equal to the height of the whole text area, effectively resizing the text area to fit the text.
The ‘input’ event is fired whenever the value of an input or text changes. This event can be detected using the addEventListener() method. The callback function of this method is set to the new function created above. This will trigger the text to resize whenever any text input is detected, therefore automatically resizing according to the text being typed or pasted.
Example: In this example, we will use Javascript for resizing the textarea.
HTML
<!DOCTYPE html><html lang="en"><head> <title> How to create auto-resize textarea using JavaScript/jQuery ? </title> <style> #autoresizing { display: block; overflow: hidden; resize: none; } </style></head><body> <h1 style="color: green"> w3wiki </h1> <b> Creating a textarea with auto-resize in JavaScript </b> <p> The textarea below will resize automatically accounting for cut, paste and typing text. </p> <textarea id="autoresizing"> Try cutting, pasting or typing here </textarea> <script type="text/javascript"> textarea = document.querySelector("#autoresizing"); textarea.addEventListener('input', autoResize, false); function autoResize() { this.style.height = 'auto'; this.style.height = this.scrollHeight + 'px'; } </script></body></html> |
Output:
How to create auto-resize textarea using JavaScript/jQuery ?
How to create auto-resize textarea using JavaScript/jQuery ?
Textareas is the area for the input but the input size should be long. We can resize the input area. Create a textarea and the task is to automatically resize it when we type or paste the content in it. It can be achieved by using JavaScript and jQuery:
Table of Content
- Using JavaScript
- Using jQuery