BinaryDevelop
  1. ホーム
  2. jquery

[解決済み】HTML5のtextareaのplaceholderが表示されない。

2022-04-17 01:14:18

質問

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

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

解決方法は？

これは、私や他の多くの人がいつも困っていることです。 要するに、「Subject」の開始タグと終了タグが <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で終わらせることにこだわっている場合は、問題が発生する可能性があります。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します