如何为html <textarea>添加默认值?

我想为我的html <textarea>设置一个默认值。我从一份材料中读到，要添加默认值，你必须做一些类似<textarea>This is default text</textarea>的事情。我试过了，但没用。正确的做法是什么?

867676 次浏览
小开
最佳答案

下面是我的jsFiddle例子。这很好:

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

如果你想从数据库中获取信息到文本区域标签中进行编辑: 输入标记不显示占用多行数据:行 no work，标记输入为一行 

<!--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>
小开

同样，这对我来说也很有效:

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

小开

你可以使用< >强占位符< /强> < >强属性< / >强，它没有添加默认值，但可能是你想要的:

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

看看这里- http://jsfiddle.net/8DzCE/949/ enter image description here < / p >

重要提示(正如Jon Brave在评论中建议的那样)

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

小开

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

<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检查空字段所需的工作。

小开

以防万一，如果你在你的项目中使用Angular.js(就像我一样)，并为你的<textarea>设置了ng-model，在里面设置默认值如下:

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

< em >…不会起作用!< / em >

你需要在相应的控制器中将默认值设置为文本区域的ng-model或使用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>

小开

几点注意事项和澄清:

  • placeholder=''插入你的文本，但它是灰色的(在一个工具提示风格的格式)，当该字段被单击时，你的文本被一个空的文本字段取代。

  • value=''不是一个<textarea>属性，它只适用于<input>标签，例如，<input type='text'>等。我不知道为什么HTML5的创造者决定不将其纳入其中，但这就是目前的方式。

    • 将文本插入到<textarea>元素的最佳方法已经在这里正确地概括为:<textarea> Desired text to be inserted into the field upon page load </textarea>当用户单击字段时，他们可以编辑

    . txt，它仍然在字段中(不像placeholder='')
  • 注意:如果你在<textarea>和</textarea>标记之间插入文本，你不能使用placeholder=''，因为它会被你插入的文本覆盖。
小开

请注意，如果你对文本区域做了更改，在它渲染后;您将得到更新的值，而不是初始化的值。

<!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的开始和结束标记之间的文本。

小开

你可以使用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.

小开

你也可以添加"value"属性并设置如下:


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

提交答案