如何为html 添加默认值?

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>这是默认文本。我那样做了，但没用。正确的做法是什么?

10 个解决方案

#1

466

Here is my jsFiddle example. this works fine:

这是我的jsFiddle示例。这工作正常:

<textarea name='awesome'>Default value</textarea>

#2

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/

查看这里——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

占位符属性没有设置textarea的值。相反，“占位符属性表示一个简短的提示(一个词或短短语)，当控件没有值时，它将帮助用户输入数据”(当用户单击textarea时，它就会消失)。它永远不会作为控件的“默认值”。如果你想要这个，你必须把想要的文本放在这里，这是实际的默认值，就像这里的其他答案一样。

#3

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标签没有任何价值，但是可以很好地使用handlebars

<textarea class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea>

#4

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:

如果你用的是角。在你的项目中(像我一样)有一个ng-model设置为你的，设置默认值如下:</p>

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

您需要在相应的控制器中将默认值设置为textarea的ng-model，或者使用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>

#5

When I do something like this it has worked for me:

当我做这样的事情时，它对我起了作用:

<textarea name="test" rows="4" cols="6">My Text</textarea>

#6

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代码被插入到与标记之间。

#7

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.

placeholder=“插入您的文本，但它是灰色的(以工具提示样式格式)，当单击该字段时，您的文本将被一个空的文本字段替换。
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.

value= "不是一个属性，只适用于 tags, ie，等。我不知道为什么HTML5的创建者决定不合并这个属性，但现在就是这样。
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 (unlike placeholder='').

将文本插入到元素的最佳方法在这里得到了正确的描述:<textarea>希望在页面加载时将文本插入到字段中，当用户单击该字段时，他们可以编辑文本并将其保留在字段中(与占位符= "不同)。
Note: If you insert text between the <textarea> and </textarea> tags, you cannot use placeholder='' as it will be overwritten by your inserted text.
注意:如果您在和标记之间插入文本，您不能使用占位符= "，因为它将被您插入的文本覆盖。

#8

Placeholder cannot set the default value for text area. You can use

占位符不能为文本区域设置默认值。您可以使用

<textarea><?php /*Enter echo $variable 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.

如果您正在使用它进行数据库连接，这就是标记。如果使用的是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.

required命令最小化了使用php检查空字段所需的工作。

#9

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成为一个空字符串。

#10

Please note that if you 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.

如您所见，textarea的值将不同于关注点textarea的开始和结束标记之间的文本。

#1

466