HTML5 textareaプレースホルダーが表示されない

183

マークアップの何が問題なのかわかりませんが、テキスト領域のプレースホルダーが表示されません。空白やタブで覆われているようです。テキスト領域にフォーカスし、カーソルが置かれた場所から削除してテキスト領域を離れると、適切なプレースホルダーが表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    </head>

    <body>

    <form action="message.php" method="post" id="message_form">
        <fieldset>

            <input type="email" name="email" id="email" title="Email address"
                maxlength="40"
                placeholder="Email Address" 
                autocomplete="off" required />
            <br />
            <input type="text" 
                name="subject" 
                id="subject" title="Subject"
                maxlength="60" placeholder="Subject" autocomplete="off" required />
            <br />
            <textarea name="message" 
                id="message" 
                title="Message" 
                cols="30" 
                rows="5" 
                maxlength="100" 
                placeholder="Message" required>
            </textarea>
            <br />
            <input type="submit" value="Send" id="submit"/>

        </fieldset>
    </form>
</body>

<script>

$(document).ready(function() {        
    $('#message_form').html5form({
        allBrowsers : true,
        responseDiv : '#response',
        messages: 'en',
        messages: 'es',
        method : 'GET',
        colorOn :'#d2d2d2',
        colorOff :'#000'
    }
);
});

</script>

</html>

— rojobuffalo
ソース

2

正常に動作するようです：jsfiddle.net/3BzBk ...スクリプトを本体の外に配置しないでください:)

— Marco Johannesen

2

どのブラウザを使用していますか？すべてのブラウザーがプレースホルダー属性をサポートしているわけではありません

— Xharze 2012

onfocusイベントとonblurイベントを常に使用して、同じ効果を得ることができます。また、次のような関数を使用して、プレースホルダーがブラウザーでサポートされているかどうかをテストできます。function placeholderIsSupported（）{test = document.createElement（ 'input'）; 戻り値（テスト中の「プレースホルダー」）; }

— gentrobot 2012

1

@MarcoJohannesenありがとうございます！何が違うのかははっきりとは言えませんが、現在は機能しています。

— rojobuffalo 2012

1

@ user1338065スーパー。体外に置いたからなのか？

— マルコヨハネ

670

これは、私や他の多くの人にとって常に困ったことです。つまり、<textarea>要素の開始は同じ行になければなりません。そうでない場合、改行文字が要素を占めます。したがって、入力領域にはコンテンツが含まれているため、プレースホルダーは表示されません（改行文字は技術的には有効なコンテンツです）。

良い：

<textarea></textarea>

悪い：

<textarea>
</textarea>

アップデート（2020）

HTML5の解析仕様によると、これはもう当てはまりません：

If the next token is a U+000A LINE FEED (LF) character token, 
then ignore that token and move on to the next one. (Newlines 
at the start of textarea elements are ignored as an authoring 
convenience.)

ただし、エディターがCRLFで行を終了するように要求した場合でも、問題が発生する可能性があります。

— アクアレル
ソース

66

男、この答えはとても簡単だったので、私はそれが真実であるとは信じていませんでした！しかし、私はそれを自分でテストしました。確かに、textarea内の空白はコンテンツと見なされ、プレースホルダーが表示されないようにしています。

— エリックL.

プラグインが編集されている場合は、jQueryの.trimメソッドを使用してこの問題を修正できます。

— SpYk3HH 2013

例は、単にJSに作品を追加することです（前または通話をプラグインした後、重要ではありません）が、次のようになります$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH

また、DOMが読み込まれた後に新しいtextarea要素を作成する場合は、の/>代わりに終了タグを含めてください>。例：$('body').html('<textarea placeholder="test" />');

— 縮退

内部に空白がある場合、<textarea>それはtextareaが空ではないことを意味するため、プレースホルダーを使用する必要はありません。:)

— Edu Ruiz

42

間のすべてのスペースと改行を削除する <textarea>開始</textarea>タグと終了タグのます。

<textarea placeholder="YOUR TEXT"></textarea>  ///Correct one

<textarea placeholder="YOUR TEXT"> </textarea>  ///Bad one It's treats as a value so browser won't display the Placeholder value

<textarea placeholder="YOUR TEXT"> 
</textarea>  ///Bad one

— リード開発者
ソース

スペースはそれを殺しますか？変だ。

— AndrewLeonardi 2016

2

スペースを値として扱います。

— リード開発者

9

どこかにスペースがあるからです。私はjsfiddleを使用していて、タグの後にスペースがありました。スペースを削除した後、機能し始めました

— マシュー
ソース

うわー！次の行にtextarea終了タグがあり、4つのスペースがインデントされています。これらの非表示のスペースはtextareaにありますが、プレースホルダーを使用するまではわかりませんでした。textareaの開始タグと終了タグの間にスペースを入れないでください！

— DOK

5

まあ、技術的には、開始タグの終了 ">"と終了タグの開始 "<"の間に文字がない限り、同じ行にある必要はありません。つまり...></textarea>、次の例のように終了する必要があります。

<p><label>Comments:<br>
       <textarea id = "comments" rows = "4" cols = "36" 
            placeholder = "Enter comments here"
            class = "valid"></textarea>
    </label>
</p>

— コニーP
ソース

3

私はこの投稿がAquarelleによって（非常に）回答されていることを知っていますが、誰かが入力などのテキストのない他のタグフォームでこの問題を抱えている場合に備えて、ここに残します。

フォームに入力があり、先頭に空白があるためプレースホルダーが表示されない場合、これは「値」属性が原因である可能性があります。変数を使用して入力の値を入力する場合は、コンマと変数の間に空白がないことを確認してください。

PHPフレームワークsymfonyにtwigを使用する例：

<input type="text" name="subject" value="{{ subject }}" placeholder="hello" />       <-- this is ok
<input type="text" name="subject" value" {{ subject }} " placeholder="hello" />      <-- this will not show placeholder

この場合、{{}}間のタグは変数です。空白も有効な文字であるため、カンマの間にスペースを残さないようにしてください。

— スパイシータコス23
ソース

2

使用し<textarea></textarea>て開始タグと終了タグの間にスペースを残すのではなく、<textarea> </textarea>

— まだ
ソース

4

これは、既存の回答がまだ対処していないことを何も追加しません。

— すべての労働者は必須

0

この場合、開始タグと終了タグの間のtextareaタグは、スペース、改行文字、または任意のtext（value）であってはなりません。

スペース、改行文字、またはテキストがある場合、プレースホルダーをオーバーライドする値と見なされます。

    **PlaceHolder Appears**
    <textarea placeholder="Am Default Message"></textarea>

    **PlaceHolder Doesn't Appear**

    <textarea placeholder="Am Default Message">  </textarea>
   <textarea placeholder="Am Default Message"> 
   </textarea>
   <textarea placeholder="Am Default Message">Something</textarea>

— ヤーガレム
ソース

0

同じ問題がありましたが、.pugファイルのみを使用しています（と同様.jade）。かっこの終わりに続いて、これもスペースの問題だと気づきました。私の例では、後のテキストを強調表示する必要があります(placeholder="YOUR MESSAGE")ます。

前：

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE") 
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

後：

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE")
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

— モードル
ソース

-1

では、問題はどのようにtextarea要素を事前入力するかです。XYZ、あなたは得るでしょう：

主な問題は、textarea要素で意図せずに空白を要素に事前入力していることです。

— ハニ
ソース