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 placeholder Property
The HTML DOM Textarea placeholder property is used to get or set the value of the placeholder attribute of a textarea element. The placeholder provides a hint to users about what kind of information is expected in the textarea field.
Syntax
Following is the syntax for returning the placeholder value −
textareaObject.placeholder
Following is the syntax for setting the placeholder value −
textareaObject.placeholder = "text"
Property Value
The placeholder property accepts a string value that specifies the short hint displayed in the textarea before the user enters a value. This text disappears when the user starts typing in the textarea.
Return Value
The placeholder property returns a string representing the current placeholder text of the textarea element. If no placeholder is set, it returns an empty string.
Example − Getting Placeholder Value
Following example demonstrates how to retrieve the placeholder text from a textarea element −
<!DOCTYPE html>
<html>
<head>
<title>Get Textarea Placeholder</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>DOM Textarea placeholder Property</h2>
<textarea id="myTextarea" placeholder="Enter your message here..." rows="4" cols="50"></textarea><br><br>
<button onclick="showPlaceholder()">Show Placeholder Text</button>
<p id="result"></p>
<script>
function showPlaceholder() {
var textarea = document.getElementById("myTextarea");
var placeholderText = textarea.placeholder;
document.getElementById("result").innerHTML = "Placeholder: " + placeholderText;
}
</script>
</body>
</html>
The output displays a textarea with placeholder text, and clicking the button shows the placeholder value −
Placeholder: Enter your message here...
Example − Setting Placeholder Value
Following example shows how to dynamically change the placeholder text of a textarea −
<!DOCTYPE html>
<html>
<head>
<title>Set Textarea Placeholder</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change Textarea Placeholder</h2>
<textarea id="feedbackArea" placeholder="Original placeholder text" rows="5" cols="60"></textarea><br><br>
<button onclick="changePlaceholder('Please enter your feedback...')">Change to Feedback</button>
<button onclick="changePlaceholder('Type your comments here...')">Change to Comments</button>
<button onclick="changePlaceholder('')">Remove Placeholder</button>
<script>
function changePlaceholder(newText) {
document.getElementById("feedbackArea").placeholder = newText;
}
</script>
</body>
</html>
Clicking different buttons changes the placeholder text dynamically. The third button removes the placeholder by setting it to an empty string.
Example − Form Validation with Placeholder
Following example demonstrates using placeholder property in form validation −
<!DOCTYPE html>
<html>
<head>
<title>Textarea Placeholder Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form onsubmit="return validateForm()">
<textarea id="message" placeholder="Enter your message (minimum 10 characters)" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Submit">
</form>
<p id="error" style="color: red;"></p>
<script>
function validateForm() {
var textarea = document.getElementById("message");
var errorMsg = document.getElementById("error");
if (textarea.value.length < 10) {
errorMsg.innerHTML = "Error: " + textarea.placeholder;
textarea.placeholder = "Please enter at least 10 characters!";
return false;
}
errorMsg.innerHTML = "";
textarea.placeholder = "Thank you for your message!";
return true;
}
</script>
</body>
</html>
If validation fails, the placeholder text changes to show the error requirement. This provides immediate visual feedback to users.
Browser Compatibility
The textarea placeholder property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The placeholder attribute itself was introduced in HTML5.
Key Points
-
The placeholder text is only visible when the textarea is empty and not focused.
-
Setting placeholder to an empty string removes the placeholder text.
-
The placeholder property does not affect the actual value of the textarea.
-
Placeholder text should be descriptive but concise to guide users effectively.
-
The property can be used dynamically to provide contextual hints based on form state.
Conclusion
The HTML DOM textarea placeholder property provides a simple way to get and set hint text for textarea elements. It enhances user experience by providing guidance on expected input and can be dynamically updated to reflect changing form requirements or validation states.
240 Views
