我想为我的html<textarea>
设置一个默认值。我从一份材料中读到,要添加默认值,你必须做类似<textarea>这是默认文本</textarea>
的事情。我这样做了,但没有效果。正确的做法是什么?
您可以使用[占位符 属性][1],它不会添加一个默认值,但可能是您正在寻找的。
<textarea placeholder="this text will show in the textarea"></textarea>
点击这里查看 -
[![在此输入图像描述][2]][3]重要注意 (正如Jon Brave在评论中所建议的那样) :。
占位符属性并不设置一个文本区域的值,而是"占位符属性代表了一个简短的提示(单词或短语)。 而是"占位符属性代表了一个简短的提示(一个单词或短语),目的是在控件没有值的时候帮助用户输入数据"。 当用户点击进入文本区域时,它就会消失。 它永远不会作为控件的"默认值"。 控件的默认值。 如果你想这样,你必须在<textarea>中放入所需的文本,这里是实际的默认值。
[1]: http://www.w3.org/TR/html5/forms.html#attr-textarea-placeholder [2]: https://i.stack.imgur.com/2M0z0.png [3]:
如果你想把数据库中的信息带入一个文本区域标签进行编辑。 输入标签不显示占用几行的数据。rows不工作,标签输入是一行。
<!--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>
如果你在项目中使用了Angular.js(就像我一样),并且为你的<textarea>
设置了`ng-model',那么在里面设置默认值就像。
<textarea ng-model='foo'>Some default value</textarea>
*......将无法工作!**
你需要在各自的控制器中设置默认值为textarea的ng-model
,或者使用ng-init
。
例子1(使用ng-init
):。
<!--开始片段。 js hide: true console: true babel.false --> -- begin snippet: js hide: true console: true false -->
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
):。
<!--开始片段。
js hide:
true console:
true babel.false --> 示例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>
<!--结束片段-->
另外,这对我来说也很有效。
<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['编码']来自于此。
<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">
PHP代码被插入到<textarea>.和</textarea>.之间。 和
一些说明和澄清。
placeholder=''
插入了你的文本,但它是灰白色的(以工具提示风格的格式),而且在点击字段的那一刻,你的文本会被一个空的文本字段取代。
value=''
不是<textarea>
属性,只对<input>
标签有效,即<input type='text'>
等。
我不知道为什么HTML5的创建者决定不加入这个功能,但目前就是这样。
在<textarea>
元素中插入文本的最佳方法已经在这里被正确地概括为。
<textarea> 当页面加载时,希望插入到字段中的文本</textarea>
当用户点击字段时,他们可以编辑该字段。
文本,并将其保留在字段中(与placeholder=''
不同)。
注意:如果你在<textarea>
和<textarea>
之间插入文本,它就会留在字段中(不像placeholder=''
)。
如果你在<textarea>
和</textarea>
标签之间插入文本,你不能使用placeholder=''
,因为它将被你插入的文本覆盖。
占位符不能设置文本区域的默认值。 您可以使用
<textarea rows="10" cols="55" name="description"> /*Enter default value here to display content</textarea>
如果你使用它来连接数据库,这就是标签。 如果您使用的是php以外的语言,您可以使用不同的语法。
例如:
<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>
。
<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>
required命令最大限度地减少了使用php检查空字段的工作量。
你可以使用this.innerHTML.
<!--开始snippet。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
<textarea name="message" rows = "10" cols = "100" onfocus="this.innerHTML=''"> Enter your message here... </textarea>
<!--结束片段-->
当文本区域被聚焦时,它基本上使textarea的innerHTML成为一个空字符串。
请注意,如果你对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的开头和结尾标签之间的文字不同。