Skip to content
Related Articles

Related Articles

HTML | DOM Textarea wrap Property
  • Difficulty Level : Basic
  • Last Updated : 15 Apr, 2019

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.






    <!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.




    <!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>

    
    

    Output:

    Before clicking on button:

    After clicking on button:

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

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Opera
    • Safari

    full-stack-img

    My Personal Notes arrow_drop_up
    Recommended Articles
    Page :