如何为html <textarea>添加默认值？[关闭]

349

我想为我的html设置默认值<textarea>。我从材料中读到，要添加默认值，您必须执行<textarea>This is default text</textarea>。我做到了，但是没有用。正确的做法是什么？

html textarea

— 新手编码器
source

1

您展示的方式是它应该如何工作的。如果没有显示您的HTML代码

— -Pekka

请显示您的html ...

— Daniel Ramirez-Escudero 2012年

1

该问题的答案适用于其中未注明代码尝试的问题。让我们在不进行这种尝试的情况下对待问题，这样就不会因为“没有代码”或“可以再复制”的密切原因而对问题进行处理。

— Tsyvarev

620

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

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

— 安德鲁·杰克曼
source

93

您可以使用placeholder Attribute，它不添加默认值，但可能是您要查找的内容：

<textarea placeholder="this text will show in the textarea"></textarea>

在这里查看-http://jsfiddle.net/8DzCE/949/

重要说明（如乔恩·布拉夫在评论中建议的那样）：

占位符属性未设置文本区域的值。而是“占位符属性表示一个简短的提示（单词或短语），旨在在控件没有值时帮助用户进行数据输入” [[当用户单击文本区域时，它就会消失]。它永远不会充当控件的“默认值”。如果需要的话，必须将所需的文本放到此处。这是实际的默认值，如此处其他答案所示

— bhavya_w
source

14

你应该清楚地表明placeholder不设置值的textarea。而是“占位符属性表示一个简短的提示（单词或短语），旨在在控件没有值时帮助用户进行数据输入” [[当用户单击文本区域时，它就会消失]。它永远不会充当控件的“默认值”。如果需要，您必须将所需的文本放在中<textarea>Here is the actual default value</textarea>，如此处其他答案所示。

— JonBrave

10

这实际上是一个非常危险的解决方案。请不要将占位符与默认值混淆。

— Qwerty

@Qwerty-是的，我们不应将占位符与默认值混淆。但是很危险。...您能说出任何示例/案例以及在何处以及如何将其构成危险（能够或可能造成伤害或伤害）吗？

— bhavya_w

1

占位符不会发送表格。如果您或您的用户希望它发送，那将很危险。

— Qwerty

2

如果不提交该值，则它不是默认值，而是提示。如果我正在寻找默认值，那么我希望它表现为默认值，而危险的是它没有表现出预期的行为。危险的是假设此解决方案将解决所要求的问题。但是，假设您确实在寻找A而在询问B是正确的。而且，如果您在回答中隐含声明，那么您的回答将是合法的。没错，这是关于知识的不足，但是正在寻找答案的人们确实缺乏知识。

— Qwerty

20

如果要将来自数据库的信息带到textarea标记中进行编辑：输入标记不显示占用多行的数据：行无效，标记输入为一行。

<!--input class="article-input" id="article-input" type="text" rows="5" value="{{article}}" /-->

textarea标签没有价值，但可以与车把配合使用

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

— 用户2519992
source

9

以防万一，如果您在项目中使用Angular.js（就像我一样）并ng-model为您<textarea>设置，请在内部设置默认值，例如：

<textarea ng-model='foo'>Some default value</textarea>

...不管用！

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

展开摘要

示例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>

展开摘要

— 拉胡尔·德赛（Rahul Desai）
source

1

艾（Ay）找到了这个stackoverflow.com/a/25391822/2199525 –使事情变得更加清晰。

— leymannx

7

一些注意事项和说明：

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=''，因为它将被插入的文本覆盖。

— twknab
source

6

当我做这样的事情对我有用：

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

— 阿伦·拉吉（Arun Raj）
source

4

另外，这对我来说非常有效：

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

在这种情况下，$ _POST ['encode']来自此：

<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">

PHP代码插入在和标记之间。

— 白钨矿
source

3

占位符无法设置文本区域的默认值。您可以使用

<textarea rows="10" cols="55" name="description"> /*Enter default value here to display content</textarea>

如果将其用于数据库连接，则这是标签。如果您使用的语言不是php，则可以使用不同的语法。对于php：

例如：

<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>

required命令最大程度地减少了使用php检查空字段所需的工作。

— 机管局
source

1

您可以使用this.innerHTML。

<textarea name="message" rows = "10" cols = "100" onfocus="this.innerHTML=''"> Enter your message here... </textarea>

展开摘要

当文本区域成为焦点时，基本上使文本区域的innerHTML成为空字符串。

— 斯特拉德
source

-1

请注意，如果您对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>

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

— 阿黛尔（Adeel Raza）Azeemi
source

-5

您还可以添加“值”属性并进行设置，如下所示：


<textarea value="your value"> </textarea>

— 怪兽
source

1

从MDN文档中：“ <textarea>不支持该value属性”。

— Robby Cornelissen，

用React编写值得与HTML规范保持一致。

— Tomasz Waszczyk