HTML5 텍스트 영역 자리 표시자가 나타나지 않음

마크 업에 어떤 문제가 있는지 파악할 수 없지만 텍스트 영역의 자리 표시자는 나타나지 않습니다. 빈 공간과 탭으로 덮여있는 것처럼 보입니다. 텍스트 영역에 초점을 맞추고 커서가있는 위치에서 삭제 한 다음 텍스트 영역을 벗어나면 적절한 자리 표시자가 나타납니다.

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

답변

이것은 저와 다른 많은 사람들에게 항상 문제가되었습니다. 요컨대, <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로 끝나는 줄을 고집하면 여전히 문제가 발생할 수 있습니다.

답변

<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

답변

어딘가에 공간이 있기 때문입니다. jsfiddle을 사용하고 있었고 태그 뒤에 공백이있었습니다. 공간을 삭제 한 후 작동하기 시작했습니다.

답변

글쎄, 시작 ​​태그의 끝 “>”과 닫는 태그의 시작 “<“사이에 문자가 없으면 기술적으로 같은 줄에있을 필요는 없습니다. 즉 ...></textarea>, 아래 예제 와 같이 끝내야
합니다.

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

답변

나는이 게시물이 Aquarelle에 의해 (매우 잘) 대답되었다는 것을 알고 있지만 누군가가 입력과 같은 텍스트가없는 다른 태그 양식 에이 문제가있는 경우를 대비하여 여기에 남겨 두겠습니다.

양식에 입력이 있고 처음에 공백으로 인해 자리 표시자가 표시되지 않으면 “value”속성이 원인 일 수 있습니다. 변수를 사용하여 입력 값을 채우는 경우 쉼표와 변수 사이에 공백이 없는지 확인하십시오.

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

이 경우 {{}} 사이의 태그가 변수이므로 공백도 유효한 문자이므로 쉼표 사이에 공백을 두지 마십시오.

답변

<textarea></textarea>여는 태그와 닫는 태그 사이에 공백을 남기지 않고 사용하십시오.<textarea>
</textarea>

답변

우리의 경우 여는 태그와 닫는 태그 사이에 textarea 태그는 공백 이나 개행 문자 또는 텍스트 (값) 가 아니어야합니다 .

공백, 줄 바꾸기 문자 또는 텍스트가 있으면 자리 표시자를 재정의하는 값으로 간주됩니다.

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