loading

How to Auto Resize Textarea Height using jQuery

How to Auto Resize Textarea Height using jQuery

How to Auto Resize Textarea Height using jQuery

0 Sales

Free

The Auto Resize function improves the usability of a textarea. It automatically increases the height of the textarea based on the content. If your online form has a textarea, you can use the auto resize option to automatically resize the height to accommodate the content. In this article, we'll teach you how to use jQuery to auto-resize a textarea.

There are several third-party jQuery plugins available that automatically adjust textarea height. However, if you want to create your own script for the textarea auto height feature, you can simply make textarea height auto changeable using jQuery without the need for a third-party plugin.

Using jQuery, we show how to easily add the auto-resize feature to a textarea element. When material is entered into the textarea, the height of the textarea field is automatically extended based on the content. As a result, the textarea height will be adjusted to match the content, and the scrollbar will be hidden from the user.

Auto Resize Textarea

Include the jQuery library first.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML Code:

Insert the textarea element that you wish to resize automatically.

<textarea id="content"></textarea>

JavaScript Code:

Using jQuery, the following code makes the textarea element auto-adjustable.

 - On loading the page, an invisible clone DIV element is produced, and the textarea is given a class.
 - The textarea content is inserted in the clone DIV when the user begins typing.
 - The clone DIV's height is applied to texrarea.
 - The element selector (#content) must be specified in the textArea variable.

<script>
$(function(){
    var textArea = $('#content'),
    hiddenDiv = $(document.createElement('div')),
    content = null;
    
    textArea.addClass('noscroll');
    hiddenDiv.addClass('hiddendiv');
    
    $(textArea).after(hiddenDiv);
    
    textArea.on('keyup', function(){
        content = $(this).val();
        content = content.replace(/\n/g, '<br>');
        hiddenDiv.html(content + '<br class="lbr">');
        $(this).css('height', hiddenDiv.height());
    });
});
</script>

CSS Code:
The CSS plays a significant role in making the clone DIV invisible and hiding the scrollbar.

<style>
textarea{
  width: 500px;
  min-height: 50px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #444;
  padding: 5px;
}
.noscroll{
  overflow: hidden;
  resize: none;
}
.hiddendiv{
  display: none;
  white-space: pre-wrap;
  width: 500px;
  min-height: 50px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  padding: 5px;
  word-wrap: break-word;
}
.lbr {
  line-height: 3px;
}
</style>

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : Feb 15, 2022

Updated Date : Feb 15, 2022

Ratings

Comments : 0

Downloads : 0