How to change the shape of a textarea using JavaScript?

Javascript Web Development Front End Technology

Textarea is a type of box with dynamic width and height, that means when the text is entered inside it, the text will not overflow and will only be contained by this texarea as it can dynamically increase or decrease its height and width. The textarea is mainly used inside the forms to get the full address of user and some other content with a larger text content.

Commonly, A textarea is in the form of square shape or the rectangular shape, which can be changes using JavaScript as well as CSS. In this article, we are going to learn about the method of changing the shape of the textarea using JavaScript.

To change the shape of a textarea using JavaScript we can use different CSS properties with different values to shape the textarea in different structures.

Change textarea into a parallelogram

To change the shape of a textarea into parallelogram we can use the style.transform property of CSS in JavaScript with a value given in terms of skew().

Syntax

Following syntax will help you to understand, how you can use the above method to change the shape of textarea −

selected_textarea.style.transform = "skew(40deg)";

Let us understand it in details by implementing it practically inside a code example to see how it changes the shape of the textarea.

Algorithm

Step 1 − In the first step, we will add a textarea to the HTML document whose shape we will change later using JavaScript.
Step 2 − In this step, we will add a button element with a onclick event associated with it, which later call a function when button is clicked and change the shape of the textarea.
Step 3 − In the next step, we will define a JavaScript function, in which we will grab the textarea element and change its shape to a parallelogram using the syntax written above.
Step 4 − In the last step, we will assign the JavaScript function as a value to the onclick event of the button so that it can call the function later when the button is clicked.

Example

The below example will explain you the method of changing the shape of a textarea to a parallelogram using transform property of CSS −

<html>
<body>
   <h2>Change the shape of a textarea</h2>
   <p id = "upper">The shape of below textarea will be changed once you click the button.</p>
   <textarea id = "textar">Enter something in the textarea.....</textarea> <br> <br>
   <button id = "btn" onclick = "changeShape()">Click to change the shape</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      function changeShape() {
         var textar = document.getElementById('textar');
         textar.style.transform = "skew(50deg)";
         upper.innerHTML = " The shape of the below textarea is changed as you clicked the button. ";
         result.innerHTML += " The shape of the textarea is changed to parallelogram using style.transform = 'skew(50deg)'";
      }
   </script>
</body>
</html>

In the above example, we have used the transform property with a value in terms of skew() to change the shape of the textarea into a parallelogram.

Change textarea shape into an ellipse

To change the shape of the textarea into an ellipse we can use the borderRadius property of CSS in JavaScript with a value of 50%.

Syntax

Following syntax can be followed to change the shape of textarea into an ellipse using borderRadius property −

selected_textarea.style.borderRadius = "50%";

Let us see the practical implementation of this method to understand the working of it.

Algorithm

The algorithm of this example is almost similar to the algorithm of the previous example. You just need to perform some minor changes by replacing the transform property in the previous example with borderRadius property and give it a value of 50% to get the elliptical shape of the textarea.

Example

The below example will illustrate the use of the borderRadius to change the shape of the textarea into an ellipse −

<html>
<body>
   <h2>Change the shape of a textarea to an ellipse</h2>
   <p id = "upper">The shape of below textarea will be changed once you click the button.</p>
   <textarea id = "textar">Enter something in the textarea.....</textarea> <br> <br>
   <button id = "btn" onclick = "changeShape()">Click to change the shape</button>
   <p id = "result"> </p>
   <script>
      var result = document.getElementById("result");
      var upper = document.getElementById("upper");
      function changeShape() {
         var textar = document.getElementById('textar');
         textar.style.borderRadius = "50%";
         upper.innerHTML = " The shape of the below textarea is changed as you clicked the button. ";
         result.innerHTML += " The shape of the textarea is changed to ellipse using style.borderRadius = '50%'";
      }
   </script>
</body>
</html>

In the above example, we have changed the shape of the textarea into a ellipse from rectangle using JavaScript with the help of the borderRadius property.

In this article, we have discussed about the two different methods of changing the shape of a textarea into two different shapes in details with the help of code examples for each one. It may be possible to change the shape of textarea into some other shape also using some other CSS property in JavaScript, so keep searching and keep learning.