How to add default value for html <textarea>?
HtmlTextareaHtml Problem Overview
I want to set a default value for my html <textarea>. I read from a material that to add default value you have to do something like <textarea>This is default text</textarea>. I did that but it doesn't work. What's the right thing to do?
Html Solutions
Solution 1 - Html
Here is my jsFiddle example. this works fine:
<textarea name='awesome'>Default value</textarea>
Solution 2 - Html
You can use placeholder Attribute, which doesn't add a default value but might be what you are looking out for :
<textarea placeholder="this text will show in the textarea"></textarea>
Check it out here - http://jsfiddle.net/8DzCE/949/
Important Note ( As suggested by Jon Brave in the comments ) :
Placeholder Attribute does not set the value of a textarea. Rather "The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value" [and it disappears as soon as user clicks into the textarea]. It will never act as "the default value" for the control. If you want that, you must put the desired text inside the , as per other answers here
Solution 3 - Html
If you want to bring information from a database into a textarea tag for editing: The input tag not to display data that occupy several lines: rows no work, tag input is one line.
<!--input class="article-input" id="article-input" type="text" rows="5" value="{{article}}" /-->
The textarea tag has no value, but work fine with handlebars
<textarea class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea>
Solution 4 - Html
Just in case if you are using Angular.js in your project (as I am) and have a ng-model set for your <textarea>, setting the default just inside like:
<textarea ng-model='foo'>Some default value</textarea>
...will not work!
You need to set the default value to the textarea's ng-model in the respective controller or use ng-init.
Example 1 (using ng-init):
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', [ '$scope', function($scope){
// your controller implementation here
}]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<textarea ng-init='foo="Some default value"' ng-model='foo'></textarea>
</div>
</body>
</html>
Example 2 (without using ng-init):
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', [ '$scope', function($scope){
$scope.foo = 'Some default value';
}]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app='myApp'>
<div ng-controller="MyCtrl">
<textarea ng-model='foo'></textarea>
</div>
</body>
</html>
Solution 5 - Html
A few notes and clarifications:
-
placeholder=''inserts your text, but it is greyed out (in a tool-tip style format) and the moment the field is clicked, your text is replaced by an empty text field. -
value=''is not a<textarea>attribute, and only works for<input>tags, ie,<input type='text'>, etc. I don't know why the creators of HTML5 decided not to incorporate that, but that's the way it is for now. -
The best method for inserting text into
<textarea>elements has been outlined correctly here as:<textarea> Desired text to be inserted into the field upon page load </textarea>When the user clicks the field, they can edit the text and it remains in the field (unlikeplaceholder=''). -
Note: If you insert text between the
<textarea>and</textarea>tags, you cannot useplaceholder=''as it will be overwritten by your inserted text.
Solution 6 - Html
Also, this worked very well for me:
<textarea class="form-control" rows="3" name="msg" placeholder="Your message here." onfocus='this.select()'>
<?php if (isset($_POST['encode'])) { echo htmlspecialchars($_POST['msg']);} ?>
</textarea>
In this case, $_POST['encode'] came from this:
<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">
The PHP code was inserted between the tags.
Solution 7 - Html
Placeholder cannot set the default value for text area. You can use
<textarea rows="10" cols="55" name="description"> /*Enter default value here to display content</textarea>
This is the tag if you are using it for database connection. You may use different syntax if you are using other languages than php.For php :
e.g.:
<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>
required command minimizes efforts needed to check empty fields using php.
Solution 8 - Html
You can use this.innerHTML.
<textarea name="message" rows = "10" cols = "100" onfocus="this.innerHTML=''"> Enter your message here... </textarea>
When text area is focused, it basically makes the innerHTML of the textarea an empty string.
Solution 9 - Html
Please note that if you made changes to textarea, after it had rendered; You will get the updated value instead of the initialized value.
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(function () {
$('#btnShow').click(function () {
alert('text:' + $('#addressFieldName').text() + '\n value:' + $('#addressFieldName').val());
});
});
function updateAddress() {
$('#addressFieldName').val('District: Peshawar \n');
}
</script>
</head>
<body>
<?php
$address = "School: GCMHSS NO.1\nTehsil: ,\nDistrict: Haripur";
?>
<textarea id="addressFieldName" rows="4" cols="40" tabindex="5" ><?php echo $address; ?></textarea>
<?php echo '<script type="text/javascript">updateAddress();</script>'; ?>
<input type="button" id="btnShow" value='show' />
</body>
</html>
As you can see the value of textarea will be different than the text in between the opening and closing tag of concern textarea.
Solution 10 - Html
You can also add the "value" attribute and set that so something like so:
<textarea value="your value"> </textarea>