Open In App

How to change the shape of a textarea using JavaScript ?

Last Updated : 19 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In General, Textarea will be in the form of rectangular or square shapes, but here we will deal with Unusual shapes of textarea which means this textarea will not be regular shapes but editable.

Method 1: In the first method, let’s see the irregular editable textarea created using CSS-shapes and content editable attribute when it is true.

Example: 

html




<style>
    div {
        top: 124px;
        margin-left: 150px;
        outline: none;
    }
      
    #parallelogram {
        color: white;
        font-weight: bold;
        width: 250px;
        height: 200px;
        transform: skew(20deg);
        background: #f00;
        overflow: hidden;
    }
      
    #eq-triangle {
        width: 300px;
        height: 0;
        border-bottom: 104px solid blue;
        /* 104 = 120 * 0.866 */
        border-left: 60px solid transparent;
        border-right: 60px solid transparent;
    }
      
    .circle {
        display: table-cell;
        padding: 40px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        font-size: 30px;
        color: #fff;
        line-height: 50px;
        text-align: center;
        background: #40a977;
        word-break: break-all;
        justify-content: center;
        overflow: hidden;
    }
</style>
  
<h1>Parallelogram Shaped TextArea</h1>
<label>
    <h3>Enter Comments:</h3>
</label>
  
<div id="parallelogram" contenteditable="true">
    Enter the something...
</div>
  
<h1>eq-triangle shaped TextArea</h1>
<label>
    <h3>Enter Comments:</h3>
</label>
  
<div id="eq-triangle" contenteditable="true">
    Enter the something...
</div>
  
<h1>Circle shaped TextArea</h1>
<label>
    <h3>Enter Comments:</h3>
</label>
  
<div class="circle" contenteditable="true">
    Enter the something...
</div>


Output:

 

Method 2: Change the shape of textarea using JavaScript. First, get the element using id and then change the shape using style.transform = “skew(40deg)”;

Example: Let’s use javascript to create unusual textarea. 

html




<style>
    textarea {
        color: brown;
        font-weight: bold;
        width: 250px;
        height: 200px;
        background: #ff7;
        overflow: hidden;
    }
</style>
<h1 style="color:green">
    GeeksforGeeks
</h1>
<center>
    <textarea id="myP">
        Unusual shape of a textarea
    </textarea>
</center>
<br>
<button onclick="myFunction()">
    Try it
</button>
  
<p id="demo"></p>
  
<script>
    function myFunction() {
        var x = document.getElementById(
        "myP").style.transform = "skew(-30deg)";
        document.getElementById("demo").innerHTML = x;
    }
</script>


Output:

How to change the shape of a textarea using JavaScript?

How to change the shape of a textarea using JavaScript?



Similar Reads

How to change the Content of a textarea using JavaScript ?
To change the content of an &lt;textarea&gt; element with the help of JavaScript, we use DOM manipulation for this with some inbuilt DOM manipulation methods. Methods to change the Content of the text Area: Table of Content JavaScript .value methodJavaScript .innerHTML methodJavaScript textContent methodUsing JavaScript innerText methodsMethod 1: J
3 min read
How to Change the Cursor Shape in CSS?
In this article, we will change the Cursor Shape in CSS. The cursor property is used to change the cursor shape. This property allows you to specify the type of cursor that should be displayed when the mouse pointer is over an element. Using the cursor PropertyThe cursor property is used to change the cursor shape. There are various predefined curs
2 min read
How to set textarea scroll bar to bottom as a default using JavaScript/jQuery ?
Given an HTML document containing &lt;textarea&gt; element and the task is to set the position of scrollbar to bottom of &lt;textarea&gt; with the help of jQuery. Approach 1: Get the scrollHeight property of the textarea. Use scrollTop property to set the position of vertical scrollbar using jQuery. Example: This example implements the above approa
3 min read
How to disable arrow key in textarea using JavaScript ?
Given an HTML element containing the &lt;textarea&gt; element and the task is to disable scrolling through arrow keys with the help of JavaScript. Approach 1: Add an event listener onkeydown on the window.If the event happens then check if the keys are arrow or not.If arrow key is pressed then prevent its default behaviour. Example: This example im
3 min read
Create a Character Limit Textarea using HTML CSS and JavaScript
In this article, we will create a Character Limit Textarea using HTML, CSS, and JavaScript. In this application, we will display the text area as an input component to the user and there is a predefined limit set to accept the input. When the limit is been crossed the user will get the alert message and he will not be able to type further in the te
6 min read
How to create auto-resize textarea using JavaScript/jQuery ?
Textareas is the area for the input but the input size should be long. We can resize the input area. Create a textarea and the task is to automatically resize it when we type or paste the content in it. It can be achieved by using JavaScript and jQuery: Table of Content Using JavaScriptUsing jQueryMethod 1: Using JavaScriptTo change the height, a n
4 min read
How to make a word count in textarea using JavaScript ?
Counting words may be useful in scenarios where the user is recommended to enter a certain number of words and the word counter can keep track of the same. Below are approaches to make a word count in textarea using JavaScript: Table of Content Calculating the number of spaces present in the textSeparating the words based on spaces and then countin
4 min read
How to Disable Textarea using JavaScript?
This article will show you how to disable the textarea using JavaScript. Disabling a textarea using JavaScript can be done by setting the disabled property of the textarea element to true. This prevents the user from editing the content of the textarea. There are some reasons to use disabled textarea, these are: Disabling a textarea prevents the us
2 min read
JavaScript Program to Print Diamond Shape Star Pattern
This article will demonstrate how to create the diamond start pattern in JavaScript. Possible Diamond Start Patterns:Solid Diamond Start PatternHollow Diamond Star PatternInverted Hollow Diamond PatternApproach to Create Diamond Star Pattern:The approach to creating a diamond star pattern will use 2 JavaScript Nested For loops to print the upper an
3 min read
JavaScript Program to Print Hollow Star Pyramid in a Diamond Shape
The JavaScript program is designed to print a hollow star pyramid in a diamond shape. This task involves generating a pattern of stars arranged in a pyramid-like shape with hollow spaces in between, forming a diamond silhouette. The program aims to provide a flexible solution that can accommodate different sizes of the diamond, allowing for customi
3 min read