当前位置：文江博客话题详情

HTML TextArea

需要登录才能够评论，你可以免费注册一个本站的账号。

一生独一 2024-11-14 15:27:11

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

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

Here is my jsFiddle example. this works fine:

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

回复收藏 0 原文

月依秋水 2024-11-14 15:27:11

您可以使用 占位符 属性，它不会添加默认值，但可能正是您正在寻找的内容：

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

在此处查看 - http://jsfiddle.net/8DzCE/949/

重要说明（根据 Jon Brave 在评论中的建议）：

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

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/

Important Note ( As suggested by Jon Brave in the comments ) :

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

回复收藏 0 原文

轮廓§ 2024-11-14 15:27:11

如果您想将数据库中的信息放入文本区域标签中进行编辑：
输入标签不显示占用多行的数据：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>

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 class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea>

回复收藏 0 原文

那伤。 2024-11-14 15:27:11

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

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

...将不起作用！

您需要将默认值设置为文本区域的 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>

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:

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

Example 1 (using 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):

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>

回复收藏 0 原文

撩心不撩汉 2024-11-14 15:27:11

一些注释和说明：

placeholder='' 插入您的文本，但它呈灰色（以工具提示样式格式），并且单击该字段时，您的文本将被替换通过空文本字段。
value='' 不是 </code> 属性，仅适用于 <code><input></code> 标记，即 < code><input type='text'></code> 等。我不知道为什么 HTML5 的创建者决定不合并它，但目前就是这样。</p>
将文本插入 </code> 元素的最佳方法已在此处正确概述为：<code><textarea>页面加载时要插入到字段中的所需文本 当用户单击该字段时，他们可以编辑
文本，并且它保留在字段中（与 placeholder='' 不同）。
注意：如果您在 </code> 和 <code> 标记之间插入文本，则不能使用 placeholder=''将被您插入的文本覆盖。

回复收藏 0 原文

素罗衫 2024-11-14 15:27:11

占位符无法设置文本区域的默认值。如果您将其用于数据库连接，则可以使用

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

This is 标签。如果您使用 php 之外的其他语言，您可以使用不同的语法。对于 php ：

例如：

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

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

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 :

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.

回复收藏 0 原文

如梦初醒的夏天 2024-11-14 15:27:11

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

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

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:

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

The PHP code was inserted between the and tags.

回复收藏 0 原文

烂柯人 2024-11-14 15:27:11

您可以使用 this.innerHTML。

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

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

You can use 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.

回复收藏 0 原文

っ左 2024-11-14 15:27:11

请注意，如果您在文本区域渲染后对其进行了更改；您将获得更新后的值而不是初始化值。

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

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

回复收藏 0 原文

烟酒忠诚 2024-11-14 15:27:11

您还可以添加“value”属性并将其设置为如下所示：


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

You can also add the "value" attribute and set that so something like so:


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

回复收藏 0 原文

~没有更多了~

评论（10）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接