Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change the shape of a textarea using JavaScript?
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.
269 Views
