web-dev-qa-db-ja.com

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

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

<!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>
jqueryformshtml5textareaplaceholder
153
rojobuffalo

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

良い：

<textarea></textarea>

悪い：

<textarea>
</textarea>
564
Aquarelle

<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
37
Lead Developer

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

9
matthew

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

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

開始タグと終了タグの間にスペースを<textarea></textarea>として残す代わりに、<textarea> </textarea>を使用します

2
Yet

私はこの投稿が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

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

2
SpicyTacos23

この場合の開始タグと終了タグの間は、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
Yergalem

.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

AFTER：

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