HTML | DOM Textarea wrap Property

Last Updated : 21 Jul, 2022

The DOM Textarea wrap Property is used to set or return the value of the wrap attribute of the textarea. It describes the way the text to be wrapped while submitting a form.

Syntax:

It is used to return the wrap property.

textareaObject.wrap

It is used to set the wrap property.

textareaObject.wrap = soft|hard

Property Values:

soft: It defines that the text is not wrapped. It is the default value.
hard: It defines that the text is wrapped. In this the cols attribute must be mentioned.

Return Value: It returns how the text is wrapped in the text area in the form of the string.

Example-1: This example illustrates how to set the Textarea wrap property.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
      DOM textarea wrap Property
  </title>
</head>
 
<body style="text-align:center">
    <h1 style="color: green;">
      GeeksforGeeks
  </h1>
    <h2>
      DOM textarea wrap Property
  </h2>
 
    <!-- Assigning id to textarea. -->
    <textarea id="GFG_ID" 
              rows="3"
              cols="10" 
              name="Geeks" 
              wrap="hard">
        This text is wrapped in the text area field.
    </textarea>
    <br>
 
    <button onclick="myGeeks()">
      Submit
  </button>
    <p id="GFG"> </p>
    <script>
        function myGeeks() {
            // Set the wrap property.
            var x =
                document.getElementById(
                  "GFG_ID").wrap = "soft";
           
            document.getElementById("GFG").innerHTML =
                "The value is changed to " + x;
        }
    </script>
</body>
 
</html>

Output:

Before clicking on button:

After clicking on button:

Example-2: This example illustrates how to return the Textarea Wrap property.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
      DOM textarea Wrap Property
  </title>
</head>
 
<body style="text-align:center">
 
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h2>DOM textarea Wrap Property</h2>
 
    <!-- Assigning id to textarea. -->
    <textarea id="GFG_ID"
              rows="3" 
              cols="10" 
              name="Geeks" 
              wrap="hard">
        This text is wrapped in the text area field.
    </textarea>
    <br>
 
    <button onclick="myGeeks()">
      Submit
  </button>
 
    <p id="sudo"></p>
 
    <!-- Return the value of the wrap property -->
    <script>
        function myGeeks() {
 
            var x = 
                document.getElementById(
                  "GFG_ID").wrap;
           
            document.getElementById(
              "sudo").innerHTML = x;
        }
    </script>
</body>
 
</html>