web-dev-qa-db-ja.com

Html <textarea>にデフォルト値を追加する方法

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

htmltextarea
309
Newbie Coder

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

<textarea name='awesome'>Default value</textarea>
548
Andrew Jackman

placeholder Attribute を使用できます。これはデフォルト値を追加しませんが、探しているものかもしれません。

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

ここでそれをチェックしてください - http://jsfiddle.net/8DzCE/949/enter image description here

重要な注意事項 （コメントでJon Braveが示唆しているように） ：

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

84
bhavya_w

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

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

Textareaタグには value はありませんが、ハンドルバーではうまく機能します。

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

念のために、プロジェクトで Angular.js を使用していて、ng-modelに<textarea>を設定し、その内側にデフォルトを設定します。

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

...は機能しません。

デフォルト値をそれぞれのコントローラの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>
8
Rahul Desai

私がこのようなことをするとき、それは私のために働きました：

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

いくつかの注意事項と説明

  • 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=''を使用することはできません。
4
twknab

また、これは私にとって非常にうまくいきました：

<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コードが挿入されました。

4
winthropite

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

<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を使って空のフィールドをチェックするのに必要な労力を最小限に抑えます。

3
A. A.

This.innerHTMLを使うことができます。

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

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

1
strahd

あなたがそれがレンダリングされた後にあなたが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の開始タグと終了タグの間にあるテキストとは異なります。

0
Adeel