Open In App

HTML DOM Textarea cols Property

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM Textarea cols Property is used to set or return the value of the cols attribute of a textarea field. The cols attribute how many average-width characters should fit on a single line.

Syntax:

  • It is used to return the cols property.
textareaObject.cols
  • It is used to Set the cols property:
textareaObject.cols = number

Property Values:

  • number: It specifies the width of the textarea fields. It has a Default value i.e 20.

Return Value: It returns a numeric value that represents the width of a textarea in characters. 

Example 1: HTML program to illustrate setting the DOM Textarea cols Property

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Textarea cols Property</title>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        DOM Textarea cols Property
    </h2>
 
    <!-- Below textarea is assigned a cols value 25
        That is, 25 characters will fit in a line -->
    <textarea id="GFG" rows="4" cols="25">
        A computer science portal for geeks.
    </textarea>
    <br>
    <button type="button" onclick="myGeeks()">
        Submit
    </button>
 
    <script>
        function myGeeks() {
            document.getElementById("GFG").cols = "50";
        }
    </script>
</body>
 
</html>


Output: 

text-dom1.gif

Example 2: HTML program to illustrate the return of the DOM Textarea cols Property

html




<!DOCTYPE html>
<html>
 
<head>
    <title>DOM Textarea cols Property</title>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <h2>
        DOM Textarea cols Property
    </h2>
 
    <!-- Below textarea is assigned a cols value 25
         That is, 25 characters will fit in a line -->
    <textarea id="GFG" rows="4" cols="25">
        A computer science portal for geeks.
    </textarea>
    <br>
    <button type="button" onclick="myGeeks()">
        Submit
    </button>
 
    <p id="sudo"></p>
 
    <script>
        function myGeeks() {
            let g = document.getElementById("GFG").cols;
            document.getElementById(
                "sudo").innerHTML =
                "There are " + g +
                " columns in a textarea width.";
        }
    </script>
</body>
 
</html>


Output:

text-dom2.gif

Note: Both “textareaObject.cols” and “style.width” work as same. 

Supported Browsers: The browser supported by Textarea cols Property are listed below:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 6 and above
  • Firefox 1 and above
  • Opera 12.1 and above
  • Safari 4 and above


Last Updated : 28 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads