Auto Resize Textarea in JavaScript | CodingNepal

Auto resizing textarea with vanilla JavaScript

This is a rewrite of my Auto resizing textarea article to remove the jQuery dependency.

The following function will add the auto resize events to your textareas that have the attribute data-autoresize . It works on mobile devices too.

function addAutoResize() { document.querySelectorAll('[data-autoresize]').forEach(function (element) { element.style.boxSizing = 'border-box'; var offset = element.offsetHeight - element.clientHeight; element.addEventListener('input', function (event) { event.target.style.height = 'auto'; event.target.style.height = event.target.scrollHeight + offset + 'px'; }); element.removeAttribute('data-autoresize'); }); }

textarea data-autoresize rows="2">/textarea>

Works best when your textareas have CSS box-sizing: border-box . It also makes sense to remove the browsers resize option:

textarea { box-sizing: border-box; resize: none; }

To add the auto resize, just call the function addAutoResize() once your textareas are exposed in DOM. When you load new content via an ajax call, you can savely call addAutoResize() again, it will only apply the events to new textareas.

Источник

How to make auto-resizing textarea with JavaScript

Here’s how to make one of those fancy textareas that gets shorter and taller depending on how much text is in it, using pure javascript.

First, all you need is a plain HTML text box:

Next, in the javascript, we’re going to write a function that makes the textarea the correct height based on how much text is in it. It first makes the text box very short, and then makes it as tall as the content that is not visible.

const textarea = document.querySelector('textarea') const resize = () =>   textarea.style.height = '5px'  textarea.style.height = textarea.scrollHeight + 'px' // e.g. 152 + 'px' = '152px' >

Now, all we have to do is run this function once the page loads, and run it again every time someone types into the text box:

resize() // run once immediately textarea.addEventListener('input', resize)

And that’s it! The text box will now change height to accommodate how much text you type into it. Here’s a CodeSandbox demonstrating the solution.

Subscribe to my newsletter!

A weekly round-up of new blog posts and updates to projects I’m working on.

Источник

How to Create Auto Resize Textarea Using JavaScript

Auto Resize Textarea Height is the best feature to fit the large content. This feature can create a user-friendly & attractive Textarea Field. It can increase or decrease the height of the Textarea field automatically based on the length of content.

You can also easily implement this feature with another text field. So, you will learn here the general code to use with any type of text field. It will be able to expand the height of the text field automatically whenever you enter or paste the content into it.

Auto Resize Textarea Height to Fit Content Using JavaScript

As you know the Textarea Field has the default behavior. Whenever you enter the largest length of content, a scrollbar will appear in its vertical direction. Even It does not increase or decrease its own height automatically. So, it does not look attractive & user-friendly.

But you should always create a user-friendly Textarea field that would be easy to use. So, I have shared the best javaScript code to create it. This script is very simple to learn & integrate into the project.

This script will also help you to create an auto-resize feature for a single & multiple Textarea field. Even It can hide the default scrollbar of a Textarea field.

You have to also use the Event Listener method and scrollHeight property in javascript code. So, know about it through the following points.

Whenever you type or paste something in the text field, the event will be fired. So, this event will be accessed using the addEventListner method. Even this method will execute the custom callback function autoResizeHeight . This callback function contains the statements to resize the Textarea height automatically.

The scrollHeight property calculates the entire height of the HTML element with its default padding in the px unit. So, It will make the Textarea height equal to the entire height of the whole content of Textarea.

Learn Also –

Auto Resizable Textarea Height with Javascript

Now, to resize the Textarea auto height based on content, you will have to configure the following steps.

• First of all, create an HTML Textarea with id=»auto-resize»
• Set overflow to hidden and resize to none using CSS to expand Textarea properly.
• Now, start to write javascript code –
• Access Textarea input with the class .auto-resize
• Apply for loop to work well for one or more Textarea
• Create a custom function autoResizeHeight ( ) and set the height to auto.

     body < background: #eeeded;>textarea < width:100%;>.auto-resize, #autoResize < height:45px; display: block; overflow: hidden; resize: none; border-left:0px; border-right:0px; border-top:0px; margin-bottom:50px; width:100%; padding:15px; padding-bottom:0px>textarea:focus < outline:none>.textarea-container < width:50%; position:relative; left:100px;>.textarea-container h3  
Default Textarea
 
Auto Resize Single Textarea
 
Auto Resize Multiple Textarea
 
 var multipleFields=document.querySelectorAll('.auto-resize'); for(var i=0; i // auto resize multiple textarea function autoResizeHeight() 

You can easily implement this code for any kind of Textarea in your project. If you face any problem with it, you should read again this tutorial and check the execution of javascript code in your browser console.

My Suggestion

I hope you have learned the above script. If you have any questions, you can ask me through the below comment box. Even you can suggest topics related to web technology.

I will share more tutorials with the best concept & Standard coding. So, you should continue to visit my blog. Even share it with your friends.

Related posts:

Источник

Auto Resize Textarea in HTML CSS & JavaScript

Hey friends, today in this blog you’ll learn how to Auto Resize Textarea using only HTML CSS & JavaScript. In the earlier blog, I have shared how to create Login Form Validation in HTML CSS & JavaScript, and now it’s time to create an auto resizable textarea using only a few lines of JavaScript codes.

Auto Resize Textarea means the height of the textarea automatically resizes according to its content. I have also set max-height for this Textarea, so it’ll start to scroll after the specified max-height. You may have noticed this type of auto resizable textarea in different messaging apps.

In this auto-resize textarea, as you can see in the preview image, there are shown two states of the textarea. The first one is the initial state and the second one is when you put some content in the textarea. When you start to type some characters in the textarea, it will automatically resize the height to fit its content.

Video Tutorial of Auto Resize Textarea in JavaScript

In the video, you have seen the demo of an Auto Resizable Textarea and knew how I created it using HTML CSS & few lines of JavaScript codes. I hope you’ve understood the codes and concepts behind creating this auto-resize textarea.

In the JavaScript codes, inside on keyup event, first I got the scrollHeight of the textarea. scrollHeight read-only property returns the entire height of an element in pixels. After I got the scrollHeight value, I passed this value as textarea height. So the textarea height will be the textarea scrollHeight.

I have only explained only main things on this blog but in the video, I have explained each JavaScript line with written comments. If you want to understand which line of code is doing what then please watch the above video.

You might like this:

Auto Resize Textarea in JavaScript [Source Codes]

To create Auto Resize Textarea in JavaScript. First, you need to create two Files: HTML & CSS files. After creating these files just paste the following codes into your file. You can also download the source code files of this auto resize textarea from the given download button.

First, create an HTML file with the name of index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.

        
Auto Resize Textarea
 
    

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

/* Import Google font — Poppins */ @import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap’); * < margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; >body < display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(#4671EA, #AC34E7); >::selection < color: #fff; background: #4671EA; >.wrapper < width: 470px; background: #fff; border-radius: 5px; padding: 25px 25px 30px; box-shadow: 8px 8px 10px rgba(0,0,0,0.06); >.wrapper h2 < color: #4671EA; font-size: 28px; text-align: center; >.wrapper textarea < width: 100%; resize: none; height: 59px; outline: none; padding: 15px; font-size: 16px; margin-top: 20px; border-radius: 5px; max-height: 330px; caret-color: #4671EA; border: 1px solid #bfbfbf; >textarea::placeholder < color: #b3b3b3; >textarea:is(:focus, :valid) < padding: 14px; border: 2px solid #4671EA; >textarea::-webkit-scrollbar

That’s all, now you’ve successfully created an Auto Resize Textarea using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

Источник

Auto Resize TextArea | Javascript

So what are textareas? Well, a textarea is similar to a text input but used for a long input text. They have a resize control through which the user can size it to suit his need. But using resize the textarea as you type sounds a bit annoying. A perfect solution here would be a textarea field that auto-adjusts its height depending on the length of text in it. Now that you know what a textarea is and why we need to add an auto-resize function to it, let us start with the coding.

Video Tutorial:

If you would like to code along with me, I have a video tutorial on my youtube channel. You can check it here below:

HTML:

We start with the HTML section. Copy the code provided below and paste it into your HTML section. I have provided the JS code inside the script tag in the HTML document itself. The HTML code consists of just a textarea with a id my-text.

CSS:

For CSS, I haven’t added any styles to the textarea except for increasing the font size. You can go ahead and add your own styles.

Other Tutorials You Might Like:

Javascript:

Coming to javascript, we get the textarea element and assign it a variable myText . We then set the height of the textarea equal to its scroll height. That means everything that isn’t in the visible part of the textarea (needs to be scrolled to see) is now visible. We need to add this similar thing when a user inputs something. For this, we add an input event listener to the textarea. So now every time the user inputs something in it, the function immediately sets the height of the textarea to its scrollHeight .

And that’s it. I hope you liked the tutorial. Drop below your suggestions and feedbacks. You can even download the source code by clicking on the button below.

Источник