Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Textarea wrap Property
The HTML DOM Textarea wrap property gets and sets the value of the wrap attribute of a textarea element. This property controls how text wrapping behaves when the form is submitted to the server.
Syntax
Following is the syntax for getting the wrap property −
object.wrap
Following is the syntax for setting the wrap property −
object.wrap = "soft" | "hard"
Property Values
The wrap property accepts the following values −
-
soft − The text is wrapped visually but line breaks are not inserted when the form is submitted. This is the default value.
-
hard − The text is wrapped visually and actual line breaks are inserted at the wrap points when the form is submitted. The
colsattribute must be specified when using "hard".
Example − Getting Wrap Value
Following example demonstrates how to get the wrap property value of a textarea element −
<!DOCTYPE html>
<html>
<head>
<title>Textarea Wrap Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Textarea Wrap Value</h2>
<textarea id="myTextarea" rows="4" cols="30" wrap="soft">This is a long line of text that will wrap when it reaches the edge of the textarea element based on the wrap setting.</textarea>
<br><br>
<button onclick="showWrap()">Show Wrap Value</button>
<p id="result"></p>
<script>
function showWrap() {
var textarea = document.getElementById("myTextarea");
var wrapValue = textarea.wrap;
document.getElementById("result").innerHTML = "Wrap value: " + wrapValue;
}
</script>
</body>
</html>
The output displays the current wrap value when the button is clicked −
Wrap value: soft
Example − Setting Wrap Value
Following example shows how to change the wrap property value dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Set Textarea Wrap Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Textarea Wrap Setting</h2>
<form action="#" method="post">
<textarea id="textArea" rows="5" cols="40" wrap="soft">This is a very long line of text that demonstrates the wrapping behavior. Type more text to see how wrapping works with different settings.</textarea>
<br><br>
<button type="button" onclick="setSoft()">Set Soft Wrap</button>
<button type="button" onclick="setHard()">Set Hard Wrap</button>
<br><br>
<input type="submit" value="Submit Form">
</form>
<p id="status">Current wrap: soft</p>
<script>
function setSoft() {
var textarea = document.getElementById("textArea");
textarea.wrap = "soft";
document.getElementById("status").innerHTML = "Current wrap: soft";
}
function setHard() {
var textarea = document.getElementById("textArea");
textarea.wrap = "hard";
document.getElementById("status").innerHTML = "Current wrap: hard";
}
</script>
</body>
</html>
The buttons allow you to switch between soft and hard wrapping modes. With hard wrapping, line breaks are preserved when the form is submitted.
Example − Comparing Wrap Behaviors
Following example demonstrates the difference between soft and hard wrap when submitting form data −
<!DOCTYPE html>
<html>
<head>
<title>Wrap Behavior Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Textarea Wrap Comparison</h2>
<h3>Soft Wrap (Default)</h3>
<textarea id="softWrap" rows="3" cols="25" wrap="soft">This text will wrap visually but line breaks won't be added to the submitted data.</textarea>
<h3>Hard Wrap</h3>
<textarea id="hardWrap" rows="3" cols="25" wrap="hard">This text will wrap visually and line breaks will be added to the submitted data.</textarea>
<br><br>
<button onclick="checkValues()">Check Values</button>
<div id="output"></div>
<script>
function checkValues() {
var soft = document.getElementById("softWrap");
var hard = document.getElementById("hardWrap");
document.getElementById("output").innerHTML =
"<p><strong>Soft wrap value:</strong> " + soft.wrap + "</p>" +
"<p><strong>Hard wrap value:</strong> " + hard.wrap + "</p>";
}
</script>
</body>
</html>
This example shows two textarea elements with different wrap settings. The hard wrap textarea requires the cols attribute and will include actual line breaks in the form data.
Browser Compatibility
The wrap property is supported in all modern browsers. However, the actual wrapping behavior may vary slightly between browsers, especially for the "hard" wrap mode.
| Property | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| wrap | Yes | Yes | Yes | Yes |
Conclusion
The HTML DOM textarea wrap property controls text wrapping behavior in textarea elements. Use "soft" for visual wrapping only, or "hard" to include actual line breaks in submitted form data. The "hard" mode requires the cols attribute to be specified for proper functionality.
237 Views
