HTML <textarea>のデフォルト値を追加するにはどうすればよいですか？[閉まっている]

349

htmlのデフォルト値を設定したい<textarea>。デフォルト値を追加するには、のようなことをしなければならないという資料を読みました<textarea>This is default text</textarea>。私はそれをしましたが、それはうまくいきません。正しいことは何ですか？

html textarea

— 初心者コーダー
ソース

1

あなたが示す方法は、それがどのように機能することになっているかです。表示されない場合はHTMLコードを表示

— Pekka

HTMLを見せてください...

— Daniel Ramirez-Escudero

1

コードの試行が記載されていない質問の回答スイート。この試みなしで質問を扱いましょう。そのため、質問は「コードなし」または「もう再現できません」という密接な理由で扱われません。

— Tsyvarev

620

これが私のjsFiddleの例です。これはうまくいきます：

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

— アンドリュージャックマン
ソース

93

プレースホルダー Attributeを使用できます。これはデフォルト値を追加しませんが、あなたが探しているものかもしれません：

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

ここで確認してください-http://jsfiddle.net/8DzCE/949/

重要なメモ（コメントでJon Braveが提案したとおり）：

プレースホルダー属性はテキストエリアの値を設定しません。むしろ、「プレースホルダー属性は、コントロールに値がない場合のユーザーのデータ入力を支援することを目的とした短いヒント（単語または短いフレーズ）を表します」[そしてユーザーがテキスト領域をクリックするとすぐに消えます]。コントロールの「デフォルト値」として機能することはありません。それが必要な場合は、ここに他の回答と同様に、ここに実際のデフォルト値である目的のテキストを入れる必要があります

— bhavya_w
ソース

14

がplaceholderの値を設定しないことを明確にする必要がありtextareaます。むしろ、「プレースホルダー属性は、コントロールに値がない場合のユーザーのデータ入力を支援することを目的とした短いヒント（単語または短いフレーズ）を表します」[そしてユーザーがテキスト領域をクリックするとすぐに消えます]。コントロールの「デフォルト値」として機能することはありません。これが必要な場合は<textarea>Here is the actual default value</textarea>、他の回答と同様に、目的のテキストを内に配置する必要があります。

— JonBrave 2016年

10

これは実際には非常に危険な解決策です。プレースホルダーをデフォルト値と混同しないでください。

— Qwerty、2016

@Qwerty-はい、プレースホルダーをデフォルト値と混同しないでください。しかし、危険....どのような例/ケースがあり、どこでどのように危険であるか（危害または傷害を引き起こす可能性があるか、または引き起こす可能性があるか）を説明できますか？

— bhavya_w 2017年

1

プレースホルダーはフォームで送信しません。あなたまたはあなたのユーザーが送信することを期待している場合、それは危険です。

— Qwerty 2017年

2

値が送信されない場合、それはデフォルト値ではなく、ヒントです。デフォルト値を探している場合、それがデフォルト値として動作することを期待しています。危険なのは、これが期待された動作を示さないという事実です。危険なのは、このソリューションが要求されたものを解決すると想定することです。しかし、私が実際にAを探していると仮定して、Bを求めることは、あなたにとって正しいことです。そして、あなたがあなたの答えの中で暗黙のうちにそれを述べれば、あなたの答えは合法になるでしょう。これは知識の欠如に関するものですが、この答えを探している人々はこの知識を欠いています。

— Qwerty

20

編集のためにデータベースからtextareaタグに情報を取り込みたい場合：入力タグは、複数行を占めるデータを表示しません：行は機能しません。タグ入力は1行です。

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

— user2519992
ソース

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>

スニペットを展開

— ラフルデサイ
ソース

1

Ayはこのstackoverflow.com/a/25391822/2199525を発見し、状況をさらに明確にしました。

— leymannx 2015年

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
ソース

6

私がこのようなことをすると、うまくいきました：

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

— アルン・ラージ
ソース

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コードがタグとタグの間に挿入されました。

— ウィンスロパイト
ソース

3

プレースホルダーはテキスト領域のデフォルト値を設定できません。使用できます

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

これは、データベース接続に使用している場合のタグです。php.For php以外の言語を使用している場合は、別の構文を使用できます。

例えば：

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

必須コマンドは、phpを使用して空のフィールドをチェックするために必要な労力を最小限に抑えます。

— AA
ソース

1

this.innerHTMLを使用できます。

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

スニペットを展開

テキスト領域がフォーカスされると、それは基本的にテキスト領域のinnerHTMLを空の文字列にします。

— strahd
ソース

-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
ソース

-5

「value」属性を追加して、次のように設定することもできます。


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

— モンスターピース
ソース

1

以下からのMDNのドキュメント：「<textarea>サポートされていないvalue属性を」。

— Robby Cornelissen

Reactで作成する場合、HTML仕様に合わせる必要があります。

— Tomasz Waszczyk