AllsWeb Blog
No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
Support
Knowledgebase
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison
No Result
View All Result
AllsWeb White Logo
No Result
View All Result
Home JavaScript jQuery & AJAX

Auto Resize Textarea Height using jQuery

Auto Resize Textarea

Lakshika Mathur by Lakshika Mathur
December 28, 2019
Reading Time: 2 mins read
0
Auto Resize Textarea Height using jQuery

The auto resize feature makes a texteria more user friendly. It automatically extends the height of the texture depending on the material. If your web form has a textaria, you can add an auto-resize feature to automatically resize the height to fit the content. In this tutorial, we will explain to you how to auto-resize Texeria using jQuery.

RELATED POSTS

Like Dislike Rating System with jQuery, Ajax, and PHP

Star Rating System with jQuery, Ajax, PHP, and MySQL

Form Validation using jQuery Validation Plugin

There are many third-party jQuery plugins available to auto resize textarea height. But if you want to build your script for textarea auto height feature. So, you can easily make textarea height auto adjustable with the help of jQuery without any third-party plugin.

Our example code offers a simple way to add the auto-shape feature to a textarea element using jQuery. Therefore, when you insert the content in the textarea, the height of the textarea field is expanded automatically based on the content. So, the textarea height will be fit to the content, and the scrollbar will not be visible to the user.

Auto Resize Textarea

Initially, include the jQuery library.

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

HTML Code:

Add the textarea element. So, you can easily auto resize.

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

JavaScript Code:

The following code will create the textarea element auto adjustable using jQuery.

  • On page load, it will create a hidden clone DIV element. Also, it will add a class to textarea.
  • If the user starts typing, it will place the textarea content on the clone DIV.
  • You have to apply the height of the clone DIV to texrarea.
  • There is a need to specify the element selector (#content) 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>

SEE ALSO: Add WYSIWYG HTML Editor to Textarea with CKEditor

CSS Code:

The CSS code plays an important role in making clone DIV invisible and hides 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>

Also, read our previous blog- Add WYSIWYG HTML Editor to Textarea with CKEditor

Also, read our previous blog- Convert Array to XML and XML to Array in PHP

Tags: Auto ResizejQuery
ShareTweetSendShareSharePinScan
Lakshika Mathur

Lakshika Mathur

Related Posts

Like Dislike Rating System with jQuery, Ajax, and PHP
jQuery & AJAX

Like Dislike Rating System with jQuery, Ajax, and PHP

January 6, 2020
739
Star Rating System with jQuery, Ajax, PHP, and MySQL
jQuery & AJAX

Star Rating System with jQuery, Ajax, PHP, and MySQL

January 6, 2020
162
Form Validation using jQuery Validation Plugin
jQuery & AJAX

Form Validation using jQuery Validation Plugin

January 2, 2020
34
Display Loading Image While Page Loads using jQuery and CSS
HTML & CSS

Display Loading Image While Page Loads using jQuery and CSS

January 1, 2020
42
Autocomplete Textbox with Multiple Selection using jQuery in PHP
jQuery & AJAX

Autocomplete Textbox with Multiple Selection using jQuery in PHP

December 29, 2019
1.2k
jQuery UI Autocomplete with Images and Custom HTML in PHP
HTML & CSS

jQuery UI Autocomplete with Images and Custom HTML in PHP

December 29, 2019
112
Next Post
Create Short URL using PHP URL Shortener

Create Short URL using PHP URL Shortener

jQuery UI Autocomplete with Images and Custom HTML in PHP

jQuery UI Autocomplete with Images and Custom HTML in PHP

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Comparison (3)
  • HTML & CSS (9)
  • Interesting Facts (1)
  • JavaScript (27)
    • jQuery & AJAX (18)
  • PHP and MySQL (48)
  • Security (10)
  • SEO (2)
  • Trademark (2)
  • Tutorials (5)
  • Uncategorized (1)
  • Web Hosting (19)
    • VPS Server (5)
  • WordPress (8)

Recent Posts

  • Is the Trademark valuable to your Brand or domain?
  • Ideas For Ten Fantastic Online Business From Home
  • Some best free WordPress Themes for Affiliate Marketing Websites
  • Home
  • Posts
  • Privacy Policy
  • Terms and Conditions

Built and Maintained With ♥ by AllsWeb Team

No Result
View All Result
  • Home
  • Main Home
  • PHP and MySQL
  • JavaScript
    • jQuery & AJAX
  • WordPress
  • SEO
  • Web Hosting
  • Comparison

Built and Maintained With ♥ by AllsWeb Team

Go to mobile version