如何为 html <textarea> 添加默认值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6007219/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add default value for html <textarea>?
提问by Newbie Coder
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 设置一个默认值<textarea>。我从一份材料中读到，要添加默认值，您必须执行类似<textarea>This is default text</textarea>. 我这样做了，但它不起作用。正确的做法是什么？
回答by Andrew Hymanman
回答by bhavya_w
You can use placeholderAttribute, which doesn't add a default valuebut might be what you are looking out for :
您可以使用占位符Attribute，它不会添加默认值，但可能是您要寻找的：
<textarea placeholder="this text will show in the textarea"></textarea>
Check it out here - http://jsfiddle.net/8DzCE/949/
在这里查看 - http://jsfiddle.net/8DzCE/949/
Important Note( As suggested by Jon Brave in the comments ) :
重要说明（正如 Jon Brave 在评论中所建议的）：
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 Here is the actual default value, as per other answers here
占位符属性不设置文本区域的值。相反，“占位符属性表示一个简短的提示（一个单词或短语），旨在在控件没有值时帮助用户输入数据”[并且在用户单击文本区域时它就会消失]。它永远不会作为控件的“默认值”。如果需要，您必须将所需的文本放在 Here is the actual default value 中，根据此处的其他答案
回答by user2519992
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: rowsno work, tag input is one line.
如果要将数据库中的信息带入textarea标签进行编辑： input标签不显示占用多行的数据：行不工作，标签输入一行。
<!--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 标签没有价值，但可以很好地处理把手
<textarea class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea>
回答by Rahul Desai
Just in case if you are using Angular.jsin your project (as I am) and have a ng-modelset for your <textarea>, setting the default just inside like:
以防万一，如果你在你的项目中使用Angular.js（就像我一样）并且ng-model为你的<textarea>设置了一个，在里面设置默认值，就像：
<textarea ng-model='foo'>Some default value</textarea>
...will not work!
...不管用！
You need to set the default value to the textarea's ng-modelin the respective controller or use ng-init.
您需要将默认值设置ng-model为相应控制器中的 textarea或使用ng-init.
Example 1 (using ng-init):
示例 1（使用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):
示例 2（不使用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>回答by twknab
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.
placeholder=''插入您的文本，但它是灰色的（以工具提示样式格式），并且在单击该字段时，您的文本将被一个空文本字段替换。value=''不是一个<textarea>属性，只适用于<input>标签，即，<input type='text'>等。我不知道为什么 HTML5 的创建者决定不合并它，但现在就是这样。将文本插入
<textarea>元素的最佳方法在此处正确概述为：<textarea> Desired text to be inserted into the field upon page load </textarea>当用户单击该字段时，他们可以编辑文本并将其保留在该字段中（与 不同placeholder=''）。- 注意：如果在
<textarea>和</textarea>标签之间插入文本，则不能使用，placeholder=''因为它会被插入的文本覆盖。
回答by Arun Raj
When I do something like this it has worked for me:
当我做这样的事情时，它对我有用：
<textarea name="test" rows="4" cols="6">My Text</textarea>
回答by winthropite
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:
在这种情况下， $_POST['encode'] 来自：
<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">
The PHP code was inserted between the and tags.
PHP 代码插入在和标签之间。
回答by A. A.
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 :
如果您将其用于数据库连接，则这是该标记。如果您使用的是 php.For 之外的其他语言，您可以使用不同的语法：
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.
required 命令最大限度地减少了使用 php 检查空字段所需的工作量。
回答by strahd
You can use this.innerHTML.
您可以使用 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.
当文本区域被聚焦时，它基本上使文本区域的innerHTML 为空字符串。
回答by Adeel Raza Azeemi
Please note that if you made changes to textarea, after it had rendered; You will get the updated value instead of the initialized value.
请注意，如果您对 textarea 进行了更改，则在它呈现之后；您将获得更新的值而不是初始化的值。
<!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.
如您所见，textarea 的值将不同于关注 textarea 的开始和结束标记之间的文本。
